javascript - Enhancement for HTML Drag and Drop upload file? -

i know question bit naive, think it's put on here anyway.

i have html drag , drop upload file. question if possible when user clicks on droparea (beside normal behavior drag , drop file droparea) , select file dialog opened , when user selects files, can call drop events , start process of normal drag , drop.

is possible or has done or thought of that?

thanks

i've had success binding drop events on input element.

see jsfiddle here: http://jsfiddle.net/lpvcm/

good luck!

html

<div id="container">     <div id="instructions">drag file here.</div> </div> 

javascript

var container = document.getelementbyid('container'),     file = null,     instructions = document.getelementbyid('instructions');  addfileinput();  function addfileinput() {     var el = document.createelement('input');     el.setattribute('type', 'file');     el.setattribute('class', 'fileinput');     el.addeventlistener('drop', function() {         instructions.innerhtml += ' thanks!';     });     el.addeventlistener('change', function() {         instructions.innerhtml += ' yum!';     el.classname += ' hidden'         addfileinput();     });     container.appendchild(el); } 

css

.fileinput {     position: absolute;     width: 300px;     height: 200px;     opacity: 0; }  .fileinput.hidden {     display: none; }  #instructions {     position: absolute;     width: 300px;     height: 200px; }  #container {     border: 1px solid black;     width: 300px;     height: 200px; }