CODEWITHSUNDEEP
javascriptform-data
Christoph
Christoph

Reputation: 968

Using FormData to upload a file

I'm hoping that someone can help me with this. I've been bashing my head against the wall for the last couple of days. I'm trying to get it so that I can programmatically add a file field to a form prior to an ajax submit. Ultimately what I am trying to do is support multiple file drag and drop within our framework. I have a base form that has been set up and will be used for each of the files as they are each, individually, uploaded (after they have been dragged/dropped). What I'm trying to do is iterate through the files that have been dragged/dropped, add them to (a copy of) the form, and then post that (copied) form back to the server. Everything I've been reading has been telling me that this is possible. But no matter what I do, I just cannot get it to work. Here is my code:

var oFormData = new FormData($form[0]), //$form is a jQuery object
    oUploadedFile = this.oUploadedFile, //regular HTML input field; yes, in an object
    sFieldName = oUploadedFile.name, //file_input_1
    sFileName = oUploadedFile.value.split('\\').pop();

oFormData.append(sFieldName, oUploadedFile.files, sFileName);

$.ajax({
  data: oFormData,
  type: 'post',
  url: '/my/uploadHandler.html',
  encoding: 'multipart/form-data',
  dataType: 'json',
  /*cache: false,*/
  contentType: false,
  processData: false,
  uploadProgress: function uploadProgress(oEvent) {
  },
  success: function success(oData, sStatus, oXHR) {
  },
  error: function error(oEvent) {
  }
});

This is what the form looks like ($form.html()):

<input type="hidden" name="TargetPage" value="/my/uploadHandler.html">
<input type="hidden" name="targetFormId" value="ResourceForm">
<input type="hidden" name="contextLabel" value="Upload">
<input type="hidden" name="ResourceId" value="0">
<input type="hidden" name="resourceFormId" value="47">
<input type="hidden" name="teamId" value="35">
<input type="hidden" name="TeamId" value="35">
<input type="hidden" id="fileRestrictions" name="fileRestrictions" value="">

And when I console.log out oUploadedFile, I'm given

<input type="file" name="file_input_1">

When I console.log out oUploadedFile.files, I'm given

> FileList {0: File, length: 1}
length:1
0: File
  lastModified: 1421935281000
  lastModifiedDate: Thu Jan 22 2015 09:01:21 GMT-0500 (EST)
  name: "10 Essential Chrome Tips to Skyrocket Your Productivity.pdf"
  size: 3426463
  type: "application/pdf"
  webkitRelativePath: ""
  __proto__: File
__proto__: FileList

So, to me, it looks like everything is kosher. I'm instantiating the FormData object correctly, I'm adding the file field to the FormData correctly (per https://developer.mozilla.org/en-US/docs/Web/API/FormData/append) and everything is getting submitted to the back end.

The problem is that when I log out $_REQUEST and $_FILES in my receiving PHP script, $_FILES is empty and I'm seeing the field input, "file_input_1", in with the other $_REQUEST data (all of which is correct and has the field/value pairs defined in the form above) and "file_input_1" has an empty value. I must be doing something wrong but I have no idea, at this point, what it might be. I'm driving myself crazy. :(

Any help would be very greatly appreciated!

thnx, Christoph

Upvotes: 1

Views: 1398

Answers (1)

Christoph
Christoph

Reputation: 968

Sometimes I'm such a dunderhead. I was missing the forest for the trees. This line

oFormData.append(sFieldName, oUploadedFile.files, sFileName);

should have been

oFormData.append(sFieldName, oUploadedFile.files[0], sFileName);

Making that change got it working as expected.

Uggh.

Upvotes: 0

Related Questions