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

Question

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
        });
    }
}

Is the Answer to your Question _"Which would be the correct way to know the size of the dropped file?"_ not included at Question itself _"When dropping files and accessing to the info of those files, with `let files= e.dataTransfer.files;` you could check the file size"_? What is issue with using `event.dataTransfer.files`? — guest271314, Jul 17 '17 at 06:25
From what I've read, .files seems to be deprecated in favor of .items (?) — GWorking, Jul 17 '17 at 06:38
Can you provide link to what you have read where `.files` is deprecated? — guest271314, Jul 17 '17 at 06:38
_"BUT, how to do that when reading a directory?"_ The solution to your updated inquiry can be found at Answer to this Question [How to upload and list directories at firefox and chrome/chromium using change and drop events](https://stackoverflow.com/questions/39664662/how-to-upload-and-list-directories-at-firefox-and-chrome-chromium-using-change-a) — guest271314, Jul 17 '17 at 06:39
I am reading the question, but even if this question is included in the other question, it answers to many other questions which makes the answer to this question quite obfuscated there. Maybe it would be useful to extract the question from there and provide it here. — GWorking, Jul 17 '17 at 09:37
@guest271314 from https://stackoverflow.com/questions/28370240/when-dragging-and-dropping-a-file-the-datatransfer-items-property-is-undefined it seems so, where I've assumed that old means or will mean deprecated at some point (?) — GWorking, Jul 17 '17 at 09:57

GWorking · Accepted Answer · 2017-07-20T05:51:56.297

2

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)

edited Jul 20 '17 at 05:51

answered Jul 17 '17 at 06:30

GWorking

4,011
10
49
90

Instead of asking a question within your Answer, perhaps consider asking a separate, specific Question? What do you mean by ""parent" node"? What are you actually trying to achieve? – guest271314 Jul 17 '17 at 13:48
By "parent" node I mean the parent node, as explained here https://developer.mozilla.org/en-US/docs/Web/API/Node/parentNode. What I am trying to achieve is to have access to the getAsFile() function, which now I can as explained in the text. – GWorking Jul 18 '17 at 06:15
`File` and `Directory` instances are not nodes. You have access to `Directory` instance at `if (entry.isFile) { entry.file(function(file) { listFile(file, entry.fullPath).then(resolve) }) } else if (entry.isDirectory) { var reader = entry.createReader(); }` at Answer at linked Question – guest271314 Jul 18 '17 at 06:26
Yes, but can you show me any documentation explaining this? I cannot find the method "file" described anywhere – GWorking Jul 18 '17 at 13:28
_"Yes, but can you show me any documentation explaining this? I cannot find the method "file" described anywhere"_ See [File and Directory Entries API](https://wicg.github.io/entries-api/#api-fileentry) – guest271314 Jul 18 '17 at 14:26
Thanks! I've updated the answer – GWorking Jul 20 '17 at 05:52

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

1 Answers1