Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript, html5: e.dataTransfer.items vs e.dataTransfer.files, how to get file size with the former? [duplicate]

When dropping files and accessing to the info of those files, with

let files= e.dataTransfer.files;

you could check the file size (https://developer.mozilla.org/en-US/docs/Web/API/File). But if you use the newer (and the substitute as far as I can read)

let items = e.dataTransfer.items;

Then there is no way to access to the file size (https://developer.mozilla.org/en-US/docs/Web/API/DataTransfer/items).

Which would be the correct way to know the size of the dropped file?

Answer: by accessing to the file with .getAsFile()

BUT, how to do that when reading a directory? See the code

let items = e.dataTransfer.items;
for (let i=0; i < items.length; i++) {
    let item = items[i].webkitGetAsEntry();
    if (item && item.isFile)
        console.log(items[i].getAsFile()); // HERE IT WORKS
    else if (item && item.isDirectory) {
        item.createReader().readEntries(function(entries) {
            for (let j=0; j<entries.length; j++)
                see_file(entries[j].getAsFile()); // HERE IT DOES NOT WORK
        });
    }
}
like image 764
GWorking Avatar asked Dec 20 '25 16:12

GWorking


1 Answers

From the answer provided in the comments, we have the following:

If the dropped item is a directory, the line

item.createReader().readEntries(function(entries) {

generates an array of entries that themselves are as item.webkitGetAsEntry() instances.

There is no way to access to the "parent", something like

 for (let j=0; j<entries.length; j++) {
   let parent = entries[j].parent;
   console.log(parent.webkitGetAsEntry());
   console.log(parent.getAsFile());
   //console.log(entries[j].getAsFile()) -> this fails
}

But, from the code of the answer above mentioned, one can do this

 for (let j=0; j<entries.length; j++) {
  entries[j].file(function(file) {
    console.log(file.webkitGetAsEntry());
    console.log(file.getAsFile());
  });
}

and therefore successfully access to the "parent" node. But I haven't been able to find documentation about this, what am I missing?

EDIT: You can find it here https://wicg.github.io/entries-api/#api-fileentry (seen in the comments)

like image 122
GWorking Avatar answered Dec 22 '25 07:12

GWorking



Donate For Us

If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!