2

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

Anton Babushkin
  • 406
  • 2
  • 12

2 Answers2

1

I worked it out.

Here's what I did and my references:

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?

Community
  • 1
  • 1
Anton Babushkin
  • 406
  • 2
  • 12
  • From what I've read, the new File API (which I wasn't aware of at all until a few days ago) isn't available in IE9, but should be in IE10. There's always the iframe-based upload to hold you over - I'm not a big fan of the idea, but it does work. – Joe Enos Aug 17 '11 at 02:09
0

I could be mistaken, but I believe there's no way to AJAX-ify a file upload. Your options are either a plug-in like Flash or Java, or a funky frame-based solution, where the upload occurs in a separate frame. I think any "AJAX" file upload control you find out there utilizes one of these methods.

The easiest way is obviously just to post the entire form to the server, but that feels so 2005 to me.

Joe Enos
  • 39,478
  • 11
  • 80
  • 136