Incorrect content type using rackspace form post

Question

I am using form post method to post some files to one of my containers on rackspace. Problem is if i upload a pdf first and then a png in 1 go, It is trying to open png in pdf viewer. Upon checking I came to know that the "Content-type" was set to "application/pdf" for png.

My form is something like

<form id="form" accept-charset="utf-8" action="action" method="POST" enctype="multipart/form-data" novalidate="novalidate">
<input type="hidden" name="redirect" value="rediredt url">
<input type="hidden" value="" name="max_file_size">
<input type="hidden" value="" name="max_file_count">
<input type="hidden" value="" name="expires" id="rack_expire">
<input type="hidden" value="" name="signature" id="rack_signature">

<div class="contentRow fileUploadWrap">
<p><input id="file2" type="file" name="file_1"></p>
<p><input id="file2" type="file" name="file_2"></p>
<p><input id="file3" type="file" name="file_3"></p>
<p><input id="file4" type="file" name="file_4"></p>
<p><input id="file5" type="file" name="file_5"></p>
<div class="contentRow">
<div class="submit"><input id="uploadFilesBtn" class="btn btn--primary" type="submit" value="Upload"></div> </div>
</div>

</form>

I cant find a way to set the content type for the files being uploaded. Is there any way i can fix this.

Answer 1

Only workaround i found for this is to update the content type of the uploaded files using api methods mentioned here.

I was already saving the file names so i just did a post CURL to update the info and that fixed the issue.

Answer 2

Use append instead of input and specify the filename like this

formData.append('userfile[]', myFileInput.files[0], 'doc1.pdf');
formData.append('userfile[]', myFileInput.files[1], 'image1.png');

The browser will identify the file type (content-type) and open the file accordingly, results may be different from browser to another, but you can relay on it for common file formats.

As specify in FormData Documentation

If you specify a Blob as the data to append to the FormData object, the filename that will be reported to the server in the "Content-Disposition" header used to vary from browser to browser.