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

In this article, I am explaining about a simple, yet effective method to recursively fetch the contents of directories in a drag-n-drop operation. You could use this for uploading multiple folders to server. If you’re interested in the working code, can go straight to the stackblitz demo that I have created for this article. If you’re interested in explanation, please feel free to go ahead with reading this article. I think reading further will help you tweak the code however you want.

StackBlitz Demo

Video demo of the method

Recursive method to list directory files - StackBlitz

Context

Created an angular application to demonstrate this, but you can use it in any JavaScript framework. We need a <div> tag, which will act as a dropzone. We can do so by specifying a ‘drop’ event listener on the tag. To make it easy to notice the dropzone, we will also specify two more event listeners on the <div> tag: dragover and dragleave events. Dragover event fires when the items are over the dropzone. Dragleave event fires when the items leave the dropzone. Apart from that, I have also specified a dragend event listener, to remove the highlight from the dropzone upon the end of a drag operation. Throughout the operation we will use a single data structure to hold all files: files: Array<any>.

Step-by-step Procedure

Fig.1. Step-by-step procedure to fetch files of multiple directory/file drops

Fig. 2. relationship among file system handles and their significance

1. Get the filesystem handles for each data transfer item (When you drag and drop items, the items are available through two different properties: event.dataTransfer.items and event.dataTransfer.files. We are using event.dataTransfer.items here as they are more powerful than files.

• We will use getAsFileSystemHandle() method of a DataTransferItem.
• getAsFileSystemHandle() will return a promise that will fulfil with: FileSystemFileHandle if the item is a file; FileSystemDirectoryHandle if the item is a directory. This is demonstrated in figure 2.

2. Iterate over the FileSystemHandles (FileSystemFileHandles and FileSystemDirectoryHandles) resulting from step 1 using for await of loop. We are using for await loop as we are iterating over a set of promises resulting from getAsFileSystemHandle() methods in step 1.

• If it is a FileSystemFileHandle, get the corresponding File object, and add it to the files array.
• If it is a FileSystemDirectoryHandle, we will recursively get all the files underneath (including the ones in sub-directories) it by calling getFilesRecursively()

3. By the end of step 2, the files array will contain all the files, along with their path. We are storing path information in a path_components property. It is a custom property that we are adding to the object of type File.

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