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. stackoverflow.com/questions/8006715/… — cggaurav
– cggaurav, Commented Jan 10, 2013 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
– Vaidas, Commented Nov 16, 2016 at 14:50

NassimPHP · Accepted Answer · 2013-03-28 03:55:36Z

27

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, 2013 at 3:55

NassimPHP

1,06610 silver badges11 bronze badges

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

2 Comments

tamir Over a year ago

well, let me know if you find a solution

Sunny R Gupta Over a year ago

@nassimPHP, did you find a solution?

jerinisready · Accepted Answer · 2019-08-01 15:45:08Z

4

From @NassimPHP 's answer, this worked!

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

answered Aug 1, 2019 at 15:45

jerinisready

1,00411 silver badges24 bronze badges

Collectives™ on Stack Overflow

Add dropped file to a file input using jQuery

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related