1

I'm trying to reproduce a drag n' drop behavior on Internet Explorer 11 (11.112.17134.0) using the code below:

document.getElementById('file').addEventListener('drop', function (event) {
   console.log(event.dataTransfer.files[0].name); // Name of the dropped file
   console.log(event.dataTransfer.files.length);

   files = event.dataTransfer.files;
   document.getElementById('file').
   setAttribute('files', event.dataTransfer.files); // Not working
}, false);

The file is being dragged from the local machine's file system. The logs show the correct information and value of the files variable is also correct, but the files attribute from the input comes empty.

It happens only in IE 11, Chrome works fine.

EDIT

Found a solid response. It's not possible to edit the files attribute from input tags.

Link: Add a File (JS object) to input type=“file”

  • https://stackoverflow.com/questions/15329292/replace-setattribute-with-ie-compatible-script – Tomasz Durda Jul 02 '18 at 20:24
  • Unfortunately, this didn't solve my problem. I added the meta tag workaround and tried: document.getElementById('file').files = event.dataTransfer.files; Still no updated files attribute. –  Jul 03 '18 at 16:28
  • Hey Edgard, did you ever manage to get it work? I'm middle of the same thing: Chrome and Firefox work both fine, but in IE assigning the files to the input tag won't work. – Quirzo May 18 '19 at 07:34
  • Unfortunately no. According to https://stackoverflow.com/questions/38905034/add-a-file-js-object-to-input-type-file, it is not possible to manually add a file. We managed to bypass it by using a ajax call storing the file temporally. It wasn't a problem because our application wouldn't be used in other browsers. Sorry. –  May 19 '19 at 20:29

0 Answers0