Using file list in javascript for multiple drag and drop

Question

I have a simple drag and drop page in my website. It allows dragging and dropping files, and below code gives me a list of dropped files.

var files = e.target.files || (e.dataTransfer && e.dataTransfer.files);

So far, so good. Problem is that when I drag and drop more files, that files object will not append to list of files I already had. Say, I dropped 2 files for the first time. files variable has 2 files in that case. If I drop a third file, e.target.files will have only the third file.

I tried creating a global variable and doing += to append file list. But javascript treats that variable as a string by default. So, var selectedFiles += e.target.files treats the file list as a string.

How can I make it so I have a list of files appended everytime a file is dropped?

I doubt that e.target.files is a string - rather a list. So you would have to push (array.push()) each single file in files to your own list each time. — Lain
– Lain, Commented Jul 24, 2018 at 6:05
Thanks. That helped me figure it out. I was declaring variable as var selectedFileList; instead of var selectedFileList = [];. That's why it was considering the variable as string. Updated declaration and used push instead of +=. — jitendragarg
– jitendragarg, Commented Jul 24, 2018 at 6:13

jitendragarg · Accepted Answer · 2018-07-24 06:15:54Z

1

Figured it out. Created a page level variable like so.

var selectedFiles = [];

And then used below code to push the files to this list.

var files = e.target.files || (e.dataTransfer && e.dataTransfer.files);
//Loop through all dropped files
for (var i = 0; i < files.length; i++) {
    //Add files to the selected file list
    selectedFiles.push(files[i]);
}

There is unnecessary looping, but I guess I can't fix that problem just yet.

answered Jul 24, 2018 at 6:15

jitendragarg

9552 gold badges16 silver badges56 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Lain Over a year ago

Depending on your browser support selectedFiles.push(...files) could be an option.

Lain · Accepted Answer · 2018-07-24 06:25:04Z

You need to push each single file to your own list (array). MDN has a nice example for it. https://developer.mozilla.org/en-US/docs/Web/API/HTML_Drag_and_Drop_API/File_drag_and_drop

var _Files = [];

function dragOverHandler(ev) {
  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();
}

function dropHandler(ev) {
  // Prevent default behavior (Prevent file from being opened)
  ev.preventDefault();

  if (ev.dataTransfer.items) {
    // Use DataTransferItemList interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.items.length; i++) {
      // If dropped items aren't files, reject them
      if (ev.dataTransfer.items[i].kind === 'file') {
        var file = ev.dataTransfer.items[i].getAsFile();
        _Files.push(file)
      }
    }
  } else {
    // Use DataTransfer interface to access the file(s)
    for (var i = 0; i < ev.dataTransfer.files.length; i++) {
      _Files.push(files[i])
    }
  };

  console.log(_Files)
}

<div id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
  <p>Drag one or more files to this Drop Zone ...</p>
</div>

Collectives™ on Stack Overflow

Using file list in javascript for multiple drag and drop

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related