Suggestion: support directories on drag and drop

[michaelmdr]

Hello Harold, I really appreciate your great work!

I would like to implement the ability to extract files from folders and subfolders using drag and drop.

If you don't mind, I'll start a pull request in the near future.

Greetings from Bavaria!

[hackingharold]

Hi there,

I just released the latest version for Angular v17 which includes support for dropping folders by default.
Please let me know if this helps you. I used your implementation for inspiration.

Releases

[michaelmdr]

Hello there,

I just tested it, it works great! Thank you very much.

One detail i noticed is that in Chrome if you drop a folder containing more than 100 files, it just gets 100 files and not the whole content. For that issue i wrote the _breakDirectoryReaderFilesLimit* method in my Pull Request to solve this problem. It would be nice to also solve this within your solution.

It is arguably not the prettiest solution, but it does its job (maybe you are able to find a better one):

private async _breakDirectoryReaderFilesLimit(directoryEntry: FileSystemDirectoryEntry) {
  const reader = directoryEntry.createReader();
  let resultEntries: FileSystemEntry[] = [];

  const recurse = async () => {
    const entries = await this._readDirectoryEntries(reader);
    if ((entries).length > 0) {
      resultEntries = resultEntries.concat(entries);
      await recurse();
    }
  };

  await recurse();
  return resultEntries;
}

Thank you in advance,
I'm looking forward to your solution!

[hackingharold]

Hi @michaelmdr,

thanks for your feedback. As stated in MDN, the readEntries() method will only return the first 100 entries.
I am just curious, what's your use case for uploading more than a hundred files using a single file input?

In my opinion, we should use an optional limit property to keep this default behaviour for users which are less involved in this topic.

[michaelmdr]

Hey @hackingharold,

for your interest, we develop a data asset managament (DAM) software. Some of our customers need to upload large amounts of files at once. Hence the ability to drag and drop files from folders breaking the 100 files limit makes things easy.

The optional limit property is a good idea!

[hackingharold]

Hi @michaelmdr,

I just released v17.2.0 which skips the limit by default.

After thinking about it, I decided not to create a property for this. We're basically creating a consistent cross-browser experience by ignoring Chrome's behavior here.

[michaelmdr]

Hello @hackingharold,

Thank you for your efforts to ensure our requirements!

[alexandis]

Hi guys.

Would be great to include file relative path information (now it is always ''). The reason this might be needed - if we are going to recreate a directory structure on server.

So I had to use this (probably not the best) method for that:

onDropCases(event: DragEvent) {
    var items = event.dataTransfer.items;
    this.files = [];
    let rejectionOccurred = false;
    const traverseDirectory = (entry: FileSystemEntry, path: string): Promise<void> => {
      return new Promise<void>((resolve, reject) => {
        if (entry.isFile) {
          const fileEntry = entry as FileSystemFileEntry;
          fileEntry.file((file: File) => {
            if (rejectionOccurred) {
              //Skip further processing
            }
            else if (file.size > AbxMeasureProtocols.maxUploadFileSizeMb * 1024 * 1024) {
              this.files = [];
              this.toaster.error('::MeasureProtocols:MaxUploadFileSizeError', 'Core:CommonUI::Error', { ...this.toasterOptions && { life: 2000 }, messageLocalizationParams: [ AbxMeasureProtocols.maxUploadFileSizeMb.toString() ] });
              rejectionOccurred = true;
              reject(new Error('File size exceeds the allowed limit.'));
            }
            else {
              this.files.push(this.copyFile(file, fileEntry.fullPath));
              resolve();
            }
          });
        }
        else if (entry.isDirectory) {
          const directoryEntry = entry as FileSystemDirectoryEntry;
          const dirReader = directoryEntry.createReader();
          dirReader.readEntries(entries => {  
            const promises = entries.map(childEntry => traverseDirectory(childEntry, path + entry.name + '/'));
            Promise.all(promises).then(() => resolve());
          });
        }
      });
    };
    const promises = [];
    for (let i = 0; i < items.length; i++) {
      let item = items[i];
      if (item.kind === 'file') {
        let webkitGetAsEntry = item.webkitGetAsEntry();
        promises.push(traverseDirectory(webkitGetAsEntry, ''));
      }
    }
    Promise.allSettled(promises).then(() => {});
  }