tamir tamir - 24 days ago 7
jQuery Question

Add dropped file to a file input using jQuery

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?
});

Answer

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

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