Send drag and drop file to input type file element

Question

I have a form builder and I want to add drag and drop file capabilities.

Where I'm stuck is that all the resources I'm coming across upload the image via xhr when dropped. I want the image to persist until the form is submitted.

Ideally the event.dataTransfer.files[0] object would be transferred to the <input type="file" ...value="[dropped-file]"> element.

Currently I'm unable to make this happen. Do they use compatible data types?

Why is it a problem to use XHR? Simply send the request after the form has been submitted, or submit the entire form w/ the file via ajax. Read up on FormData for more info. — Ray Nicholus
– Ray Nicholus, Commented Jul 25, 2013 at 18:58
My understanding is that FormData doesn't work well with older (8-9) IEs. Am I wrong? — emachine
– emachine, Commented Jul 25, 2013 at 19:16
That is true (FormData doesn't exist in those browsers), but irrelevant, since you cannot upload files via drag & drop in those browsers anyway. — Ray Nicholus
– Ray Nicholus, Commented Jul 25, 2013 at 19:21

nicksweet · Accepted Answer · 2013-07-25 19:03:42Z

3

You could just create and send a form after your drop event has occurred, and the user clicks a conf button. Heres the gist of it: (not tested).

function uploadFile(file) { var form = new FormData(), xhr = new XMLHttpRequest(); form.append('media', file); xhr.open('POST', '/myurl/'); xhr.onprogress = function(e) { showProgress(); } xhr.onload = function(e) { showSuccessConf(); } xhr.send(form); } uploadFile(event.dataTransfer.files[0]);

answered Jul 25, 2013 at 19:03

nicksweet

3,9991 gold badge22 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

emachine Over a year ago

Was hoping to send it via the normal $_POST but I may have to switch over to an xhr option. Thanks for the reply.

Ray Nicholus Over a year ago

This will sent a POST request. As far as your server is concerned, there is no difference between a form submit and a FormData object sent via POST using XHR.

Ariel Over a year ago

This doesn't really answer the question. I want to be able to upload the file through the usual file input OR by dragging/dropping to a custom zone. In any case the form has several input fields and the file input is just one of them, so I'd like to submit the whole form at once the traditional way: with a simple form submission.

Collectives™ on Stack Overflow

Send drag and drop file to input type file element

1 Answer 1

3 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Related