9

I am using file uploading in my web application by using the <input type="file" /> html tag. My feature works well with choosing a file from the file chooser and submitting the file, however now I want to upload a file on drag and drop events i.e. the user drags a file from some location on his computer and when he drops it in a particular section in my web page, the file starts uploading.

Until now I managed to read the files from the drop event by

 function drop(evt) { evt.stopPropogation(); evt.preventDefault(); if (containsFiles(evt)) { var files = evt.dataTransfer.files; var count = files.length; // Only call the handler if 1 or more files was dropped. if (count > 0) // upload files } } }

but how can I upload these files? I can't change the value of input type = file for security reasons. So what can I do to pass these files to my servlet?

Improve this question
6
  • 2
    have a look at blueimp.github.io/jQuery-File-Upload Commented Jul 29, 2013 at 15:13
  • developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest/… Commented Jul 29, 2013 at 15:13
  • Or, if you are looking for a well-supported cross-browser library that does all of this for you, have a look at Fine Uploader. Full disclosure: I maintain Fine Uploader. Commented Jul 29, 2013 at 15:15
  • 1
    Fine Uploader seems like a fine plug-in! I'm going to dig into it and try to integrate it with my web application. Thanks @Ray Nicholus for your help :) Commented Jul 29, 2013 at 15:30
  • @Bernice Sure thing. Be sure to have a look at the support page if you require technical support, uncover a bug, or have an idea/need for a new feature. Commented Jul 29, 2013 at 16:02

2 Answers 2

Reset to default
3

You have to use FormData (beware of IE support).

When drop happens you need to create FormData object, and append data into it, then POST that form to your url. It is asynchronous method and will not reload your page.

function drop(evt) { evt.stopPropogation(); evt.preventDefault(); var files = evt.dataTransfer.files; if (files.length > 0) { var form = new FormData(); for(var i = 0; i < files.length; ++i) { var file = evt.dataTransfer.files[i]; form.append('image_' + i, file, file.name); } var req = new XMLHttpRequest(); req.open('POST', '/pathToPostData', true); req.onload = function(evt) { console.log(req.responseText); } req.send(form); } }

Beware that I've tested it only in Chrome and Firefox, IE9 probably will not work but IE10 should, if you test it, let us know please.

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

6 Comments

Not sure why someone downvoted this answer. It's a good start. Care to elaborate?
I am using this method in single page CMS for API like application, and it works brilliantly. And regarding down-vote. Please who did it, provide info of what and why?
Thanks @MaksimsMihejevs I tried this just now and it is submitting my data just as I want. The only thing I need now is to use Ajax so that I refresh the page instantly and the users can see that the file has been uploaded.
You don't really need to refresh page, as your server after upload, can respond with paths to files as well as any extra data you need, then in .onload you will receive this data, and can easily using JavaScript update front-end, so it will be much better UX when updated without need of refresh.
But since I need to display a table with uploaded files and a thumbnail view immediately, I need to refresh the page.
|
-2

I believe you want something in the likes to Dropzone.js

I haven't tried it yet, but it's a library that allows for easy drag-and-drop of files to a website that is running it, v3.0 comes without the need to use jQuery.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.