Question

I have an interesting problem that I’m trying to solve and was wondering if any of you could give me a hand.

I’m building a little tool that allows users to Drag and Drop files into our CMS. Whilst I’ve got the Drag and Drop part is working fine (using the new HTML5 APIs) I’m stuck in terms of how the file upload should work, especially since my constraint is that I cannot modify any of the server’s functions. I’ve looked at all other examples and they all relatively have simple uses cases where they just send the file data across, without having to convert everything to multipart/form-data, etc.

At the moment the server has a simple form that looks a bit like so:

Name: [ input=text ]
File: [ input=file ]
Caption: [ textarea ]

When a user hits the “Save” button, a POST call is issued of content type multipart/form-data.

Originally I was thinking I could just replace the current input control with my own hidden one (using the same “name” attribute) and just have the base64 encoded data as the “value”, however the CMS expects a “filename” to be passed through, which normally is taken care of by the input=file. So for example, the final post looks a bit like so:

Content-Disposition: form-data; name="image_0"; filename="assets.jpg" 

Content-Type: image/jpeg

<Some binary image data here>

Am I going about this completely the wrong way? Should I be just using the XHR object instead?

Cheers

Answer 1

I worked it out.

Here’s what I did and my references:

• Sending multipart/formdata with jQuery.ajax
• https://developer.mozilla.org/En/Using_XMLHttpRequest#Using_FormData_objects
• https://developer.mozilla.org/en/DOM/File

I had to use the FormData object (available in Firefox 4+, Safari 5+ and Google Chrome) and of course the FileReader object.

Here is the implementation (with jQuery):

// The file object needs to come from the "drop" event and is read by the "FileReader" object with the readAsBinaryString() function.
// var file = null;

var data = new FormData();
$("#main_form input:not([type=file])").each(function(){
    data.append($(this).attr("name"), $(this).val());
});
data.append("image_0", file);
$.ajax({
    url: $("#main_form").attr("action"),
    type: "POST",
    data: data,
    processData: false,
    contentType: false
});

At the moment IE isn’t an issue, but will be soon (since I need to port this extension to IE). Is there a better way to do this for IE?