拖放文件上传

Question

I have an HTML form, used to upload a file. The file is added to the hidden file input field. When the form is submitted, this file and any other params are sent to the server.

The app uses jQuery.

var data = ev.clipboardData.files;
$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", data);

I have read several approaches, but none of them used the input[type=file] field.

How does one store the dropped file, if it's not by using the input field?

I also tried to implement this:

https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

I tried to add something like

$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", files);

which throws

TypeError: Failed to set the 'files' property on 'HTMLInputElement': The provided value is not of type 'FileList'.

So it looks like "files"/FileList becomes read-only?

Please point me in the right direction.

Answer 1

You need to look into javascripts filereader api . The contents of an input type file are always readonly, however what you can do is read those contents, and store them in a global array (If you want to post multiple files).

Once they're in an array you can do what you want with them, eg validate file type, size, etc...

Answer 2

We had to change clipboardData to dataTransfer

- var data = ev.clipboardData.files;
+ var data = ev.dataTransfer.files;

$(ev.target).closest(".upload-box").find("input[type=file]").prop("files", data);