Add dropped file to a file input using jQuery

Question

I have a custom file input:

<div id="wrapper">
    <span id="fake-text-input"></span>
    <button id="select-a-file"></button>
    <input id="hidden-file-input" type="file" />
</div>

The input[type="file"] is hidden (display: none) and selecting a file is handled by listening\triggering the click and change events.

I want to support file drop as well. I was able to listen to the drop event when a file is dropped on #fake-text-input but I don't know how to forward the drop event to the input[type="file"].. is it even possible?

I'm not interested in file input opacity tricks :)

$('body').on('drop', '#wrapper', function(e) {
    var file = e.originalEvent.dataTransfer.files[0];

    // I have the file.. now what?
});

You should take a look at this SOq. http://stackoverflow.com/questions/8006715/drag-drop-files-into-standard-html-file-input — cggaurav, Jan 10 '13 at 21:07
I don't know any possibility to append files to the file input. I think it's not allowed for security reasons. But maybe you don't need it. Why can't you just fire POST request using $.ajax({type: "POST", ...}) immediately after you got a file? — Vaidas, Nov 16 '16 at 14:50

score 25 · Accepted Answer · answered Mar 28 '13 at 03:55

25

This is worked with me in google chrome , the problem now with other browsers

$("input[type='file']").prop("files", e.originalEvent.dataTransfer.files);

answered Mar 28 '13 at 03:55

NassimPHP

1,036
10
11

3

well, let me know if you find a solution – tamir Apr 02 '13 at 18:39
@nassimPHP, did you find a solution? – Sunny R Gupta Nov 17 '16 at 06:00

score 4 · Answer 2 · answered Aug 01 '19 at 15:45

4

From @NassimPHP 's answer, this worked!

$("input[type='file']").prop("files", e.dataTransfer.files);

answered Aug 01 '19 at 15:45

jerinisready

936
10
24

Add dropped file to a file input using jQuery

2 Answers2