Set input file element with file using HTML5 File API

Question

I am using an input file element to upload file in my JSP page. The user can upload the file by clicking on a button which opens a form with browser's browse button

Now, I want to upload the file by using drag drop feature of HTML5 (as described @ html5 rocks page). I am able to extract the file name using File API. Is there a way to load the input file element with the dropped file using File API? (So that I may use the same behavior to upload file)

Answer 1

There's no way to set the value of a <input type=file> directly in JS. That action requires user intervention (and a click on a file picker). However, you can use xhr.send(FormData) or xhr.send(File) to send the files. See my response here:

HTML5 File API readAsBinaryString reads files as much larger, different than files on disk

In your drop handler, just pas the FileList obtained from evt.dataTransfer.files to that uploadFiles() helper.

Answer 2

I was able to set the "files" attribute of the input element with the files property of the dataTransfer object.

document.getElementById("insert input file id").files = evt.dataTransfer.files;

I just tried using getelement.value and it errors. Set the files property with the files list.

Happy Programming!

Kremnari