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

Answer 1

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

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

Answer 2

From @NassimPHP 's answer, this worked!

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