Remember and Repopulate File Input in HTML5

---

<p style="">To repopulate, use the drag and drop. This was not possible before, but now it is valid.</p><p style="">Let us see how &minus;</p><pre class="prettyprint notranslate">function drop(ev) { &nbsp; &nbsp;ev.stopPropagation(); &nbsp; &nbsp;ev.preventDefault(); &nbsp; &nbsp; &nbsp;// retrieving dataTransfer field from the event &nbsp; &nbsp;var d = ev.dataTransfer; &nbsp; &nbsp;var files = d.files; &nbsp; &nbsp;handleFiles(files); }</pre><p>For drag and drop &minus;</p><pre class="prettyprint notranslate">// dragging target.addEventListener(&#39;dragover&#39;, (ev) =&gt; { &nbsp; &nbsp;ev.preventDefault(); &nbsp; &nbsp;body.classList.add(&#39;dragging&#39;); }); // drag leave target.addEventListener(&#39;dragleave&#39;, () =&gt; { &nbsp; &nbsp;body.classList.remove(&#39;dragging&#39;); }); // drop target target.addEventListener(&#39;drop&#39;, (ev) =&gt; { &nbsp; &nbsp;ev.preventDefault(); &nbsp; &nbsp;body.classList.remove(&#39;dragging&#39;); });</pre>

• Related Questions & Answers
• Validate the size of input=file in HTML5?
• Is it possible to validate the size and type of input=file in HTML5?
• Input type URL in HTML5
• Using HTML5 file uploads with AJAX and jQuery
• Autocomplete text input for HTML5?
• HTML5 Canvas to PNG File
• JavaScript File Drop with HTML5
• HTML5 & JavaScript: resolution or size of <input type=file capture=camera>
• input type week really exist in HTML5?
• Client Checking file size using HTML5
• IE supports the HTML5 File API
• What is HTML5 file Blob.slice() method
• HTML5 Input type “number” in Firefox
• HTML5 Input type=number removes leading zero
• HTML5 file uploading with multiple progress bars