ProgerXP / FileDrop

Self-contained cross-browser pure JavaScript class for Drag & Drop and AJAX (multi) file upload.
filedropjs.org
The Unlicense
264 stars 61 forks source link

Can't seem to force multipart/form-data #8

Open mgkimsal opened 10 years ago

mgkimsal commented 10 years ago

I've got a lot of code that expects uploads to come in with multipart/form-data formatting, but filedropjs seems to always send just the raw data alone. Are there any settings I'm missing to force mpfd?

ProgerXP commented 10 years ago

This is not always possible. Actually, the only case when iframe will be used is for legacy upload (IE, some Opera). For others AJAX will always be used but not in all browsers you have access to raw data (e.g. not in Safari 5).

The best you can do, if you need to send the data as MPFD - implement your own event handler for send that instead of calling sendTo('url') will readData() (http://filedropjs.org/#fm) and send it via XHR. However, with this you will lose support of browsers not able to read raw data. But you will retain support for iframe upload since it's always MPFD.

rchrd2 commented 9 years ago

+1 to this question.

@mgkimsal, did you end up implementing this suggestion? Do you have sample code?

@ProgerXP, I also think it would be helpful to have a flag to force multipart/form-data. I think there are advantages to that, such as keeping the original filename. We are using Django-Rest-Framework, and it doesn't support Application/Octet-Stream out of the box. Thank you.

ProgerXP commented 9 years ago

@rchrd2 There's nothing to "force" because AJAX uses no standard form upload. Your case is just special and you won't need most of FileDrop features anyway (at least those which support legacy upload). This way I suggest you handle actual upload with your own custom code - FIleDrop has got a bunch of data reading methods that you can use.

Here's a high level idea: create a HTML5 (drop-only) zone: http://filedropjs.org/#pure, listen to send and then create your own XMLHttpRequest, if you want it to use standard FileDrop events (error, progress, done) - call zone.hookXHR(xhr), set up your Django headers, read data from supplied files and construct MPFD, then send the XHR.

The hardest part of this would be to build MPFD by hand but I can't see any way around it - if you need to keep original file name, etc. you have to have an <input type=file> and that input should have the dropped file selected which I don't think is even possible without user interaction.

On the other hand, if you need MPFD that badly why do you need FileDrop at all? You can just make a regular <form><input type=file onchange="this.parentNode.submit()"></form> and it will be droppable in Firefox and Chrome (possibly others) working as you'd expect.

rchrd2 commented 9 years ago

Thanks for your feedback.

mgkimsal commented 9 years ago

I did not - I'm revisiting this next week and will reevaluate how we handle this. Thank you all for the input.