Submitting data instead of a file for an input form

Question

I'm using jQuery to retrieve an image and post it to another form:

handler = function(data, status) {
    ...
    var fd;
    fd = new FormData;
    fd.append("file", data);
    jQuery.ajax({
      url: target_url,
      data: fd,
      processData: false,
      contentType: false,
      type: "POST",
      complete: function(xhr, status) {
        console.log(xhr.status);
        console.log(xhr.statusCode);
      }
    });
};
jQuery.get(imageUrl, null, handler);

The form looks something like this:

<form>
  <input type="file" name="file" />
  ...
</form>

Things aren't working as expected. I'm getting a 200 response from the server side, and it renders the forms with some of the values pre-populated.

I've also tried setting contentType: "multipart/form-data"

Any ideas why this is not working?

score 2 · Accepted Answer · answered Jul 14 '13 at 20:13

2

You're sending a string which will not be recognized as a file. Try sending a blob

fd.append("file", new Blob([data], { "type" : "text/plain" }));

I'm pretty sure this will only work for text files, unless you set the responseType on the original request.

answered Jul 14 '13 at 20:13

Musa

96,336
17
118
137

Hmm. If this is an image, do I need to set the type accordingly? "image/png", etc. – jabalsad Jul 14 '13 at 20:18
Well, that certainly did something. Thanks :) Now I just have to figure out why the size of the image has changed. Original image size 15k, data submitted = 35k :/ – jabalsad Jul 14 '13 at 20:29
@jabalsad the size changed because the image data was converted to text to prevent this you'll have to set the `responseType` property of the XMLHttpRequest object (to blob). – Musa Jul 14 '13 at 21:13
jQuery's ajax method doesn't allow Blob response types. Is it necessary to use XMLHttpRequest directly? Seems like an arbitrary limitation. – jabalsad Jul 15 '13 at 15:03
@jabalsad well you cant use `$.get` but I'm sure you can do it with `$.ajax`. – Musa Jul 15 '13 at 15:34
according to http://api.jquery.com/jQuery.ajax/ dataType can only be html, xml, json, text, script – jabalsad Jul 15 '13 at 17:32
@jabalsad I was talking about https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest#responseType – Musa Jul 15 '13 at 17:51
Hmmm I see. But basically that means I'll have to use XMLHttpRequest directly instead of jQuery's .ajax() method. Thanks, I'll have to hack a bit to see if I can get it working. – jabalsad Jul 16 '13 at 08:55
@jabalsad you can use `xhrFields` to set properties on the native xhr object – Musa Jul 16 '13 at 12:52
Ah neat! I'll definitely try that – jabalsad Jul 16 '13 at 14:09
I had to set the responseType on the XHR object using the beforeSend callback function (looks like the connection needs to be open first). But the data passed into the handler is still a string (by running `data.constructor`). – jabalsad Jul 16 '13 at 15:33
@jabalsad yeah I tried too but failed, you'll have to use native XMLHttpRequest then – Musa Jul 16 '13 at 15:37

Submitting data instead of a file for an input form

1 Answers1

Linked