Remember and Repopulate File Input in HTML5

To repopulate, use the drag and drop. This was not possible before, but now it is valid.

Let us see how −

function drop(ev) {
   ev.stopPropagation();
   ev.preventDefault();
 
   // retrieving dataTransfer field from the event
   var d = ev.dataTransfer;
   var files = d.files;
   handleFiles(files);
}

For drag and drop −

// dragging
target.addEventListener('dragover', (ev) => {
   ev.preventDefault();
   body.classList.add('dragging');
});

// drag leave
target.addEventListener('dragleave', () => {
   body.classList.remove('dragging');
});

// drop target
target.addEventListener('drop', (ev) => {
   ev.preventDefault();
   body.classList.remove('dragging');
});

Nancy Den

Updated on: 24-Jun-2020

230 Views

Kickstart Your Career

Get certified by completing the course

Get Started