FileSystemFileEntry's method 'file()' fails on local file

Question

I'm trying to use the File and Drag'n'Drop APIs together, and specifically webkitGetAsEntry method. From the example source code on the linked page you may find further links to the Mozilla's playground (for sharing a direct link to the specific playground user must be logged in, so I can't provide it, sorry for inconvenience).

The only thing I'd like to add into the code is reading the file contents dropped on the target. So I added to the JS code the following:

function scanFiles(item, container) {
  let elem = document.createElement("li");
  elem.textContent = item.name;
  container.appendChild(elem);
  item.file((file) => {             // +
    fr = new FileReader();          // +
    fr.onload = function (e) {      // +
      console.log(e.target.result); // +
    };                              // +
    fr.readAsText(file);            // +
  }, (e) => console.log(e));        // +
  ...
}

The snippet works normally on the web server (if it's important, I use a small test json-file). But when I try to drag and drop a file into a local html-page (with complete copy of the snippet), the method file() fails with the error:

"DOMException: A URI supplied to the API was malformed, or the resulting Data URL has exceeded the URL length limitations for Data URLs."

I'm not sure which URI is malformed among the existing properties of the item (taken from the watch under debugger):

filesystem: DOMFileSystem {name: 'file__0:Isolated_2593BD5520A6B3C40C2DE438E8C2F58C', root: DirectoryEntry}
fullPath: "/small.json"
isDirectory: false
isFile: true
name: "small.json"

In any case, I do not enter any URIs manually, all data is acquired and formed by the browser itself. And most importantly - I don't see a way to edit URI (it's removed from File APIs due to security considerations).

What is wrong with reading files in locally hosted web-page/web-app? How to make it working?

AFAIK, Drag and Drop APIs does not apply CORS limitations, and FileSystem API is intended for local files by design.

The browser I'm using for tests is Brave.

PS. I've enabled File System Access API in browser settings, and local apps like TiddlyStow seems working with local files (though I'm not aware how exactly it's supposed to work).

Answer 1

I found a solution. Instead of webkitGetAsEntry() method one should use getAsFileSystemHandle(). As per documentation, both methods return FileSystemEntry object, but the 1-st one imposes some security restrictions whereas the 2-nd does not. Also the second wraps the object into a promise, and is marked as experimental.

Here is the source code with changes noted by comments.

async function scanFiles(item, container) {              //+ async
  let elem = document.createElement("li");
  elem.textContent = item.name;
  container.appendChild(elem);
  if(item.kind === 'file') {                             //+
    const file = await item.getFile();                   //+
    let data = document.createElement("div");            //+
    data.innerHTML = "";                                 //+
    container.appendChild(data);                         //+
    fr = new FileReader();                               //+
    fr.onload = function (e) {                           //+
      let lines = e.target.result;                       //+
      data.innerHTML = lines;                            //+
    };                                                   //+
    fr.readAsText(file);                                 //+
  }                                                      //+

  //- if (item.isDirectory) {
  //-   let directoryReader = item.createReader();
  //-   directoryReader.readEntries((entries) => {
  //-     entries.forEach((entry) => {
  //-       scanFiles(entry, directoryContainer);
  //-     });
  //-   });
  if (item.kind === 'directory') {
    let directoryContainer = document.createElement("ul");
    container.appendChild(directoryContainer);
    for await (const [key, value] of item.entries())
    {
      scanFiles(value, directoryContainer);
    }
  }
}

dropzone.addEventListener(
  "drop",
  async (event) => {                                     //+ async
    let items = event.dataTransfer.items;

    event.preventDefault();
    listing.textContent = "";

    for (let i = 0; i < items.length; i++) {
      let item = await items[i].getAsFileSystemHandle(); //- .webkitGetAsEntry(); + await

      if (item) {
        scanFiles(item, listing);
      }
    }
  },
  false,
);