Remember and Repopulate File Input in HTML5

JavascriptFront End ScriptsWeb Development

<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>
raja
Updated on 24-Jun-2020 14:19:24

Advertisements