Two alternative approaches to process Drag and Drop directory uploads in Web Applications

In this article, I am talking about two different ways to process drag and drop file and folder uploads: FileSystemHandle based approach and FileSystemEntry based approach. Each of these approaches have their own pros and cons. Ideally, you should rely on a mix of them to get the best of both approaches.

Recursive JavaScript method to process multiple directories drops in a Drag-n-drop upload operation

To see the FileSystemHandle approach in action, please feel free to my earlier post on this. That post also contains a link to the Stackblitz demo. In this article, I am presenting the FileSystemEntry approach to process directory uploads. I am also comparing both approaches to process drag and drop directory uploads.

Context

When you drag and drop items onto a dropzone, the individual items are represented by DataTransferItem interfaces. To upload a file to the server, you need a File object for the relevant file. To upload a directory(folder) to the server, you need File objects for all its contents.

Demo

Stackblitz Code

Recursive method to list directory files (FileSystemEntry Approach) - StackBlitz

Comparison of FileSystemHandle and FileSystemEntry approaches

Fig 1. Support for FileSystemHandle based approach

Fig.2. Support for FileSystemEntry based approach

Fig. 3. Comparison of FileSystemHandle vs FileSystemEntry approach to process drag and drop directory uploads

Summary

To summarize, I have presented two different ways to process drag and drop directory uploads, and also compared them side by side on 4 important parameters. The goal is to give the working demo for both approaches, which you can visit through the stackblitz demo links. The goal is also to make it much easier for you to make decision about which approach to use.

Please feel free to leave your thoughts. Thanks for reading.