Remember and Repopulate File Input in HTML5

JavascriptFront End ScriptsWeb Development

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');
});
raja
Nancy Den
Published on 05-Apr-2018 11:01:10
Previous Page Print Page
Next Page  
Advertisements