How to handle folder uploads in Angular 2+

At Lucidpress, we recently decided to revamp our image manager experience by creating a completely new image manager written in Angular 2 and Typescript. One of the key new features we wanted to add was bulk image upload, which is the ability to upload a folder with all of its contents while maintaining the original folder structure. There are two ways for a user to initiate folder uploads:

• Drag and drop a folder
• Provide a file picker that allows folder selection

It took a little research to find the modern method for handling folder uploads. I compiled a few code snippets with explanations as a quick reference for others. Here’s a look at how you can implement this feature in your web app.

Drag and Drop

With HTML5 came a well-established Drag and Drop API. When you drop a folder, a drop event is received with a file item as part of the data transfer. The only way to access the contents of this folder is through webkit filesystem API, which is not part of HTML5. A DataTransfer file has a webkitGetAsEntry method which returns the webkitEntry for the file (supported only in Chrome, Firefox, and Edge). Each webkit entry can either be a file or a directory—use isFile and isDirectory to determine which kind.

function drop(event) {
    const items = event.dataTransfer.items;
    for (let i = 0; i < items.length; i++) {
        const item = items[i];
        if (item.kind === 'file') {
            const entry = item.webkitGetAsEntry();
            if (entry.isFile) {
                ...
            } else if (entry.isDirectory) {
                ...
            }
        }
    }
}

If the entry is a file entry, the file blob can be accessed with the file method.

function parseFileEntry(fileEntry) {
    return new Promise((resolve, reject) => {
        fileEntry.file(
            file => {
                resolve(file);
            },
            err => {
                reject(err);
            }
        );
    });
}

If the entry is a directory entry, all of the sub-entries in the directory can be accessed with the readEntries method on a directory reader. Create a directory reader for a directory entry by calling the createReader method on the directory entry.

function parseDirectoryEntry(directoryEntry) {
    const directoryReader = directoryEntry.createReader();
    return new Promise((resolve, reject) => {
        directoryReader.readEntries(
            entries => {
                resolve(entries);
            },
            err => {
                reject(err);
            }
        );
    });
}

The only help Angular offers is to easily bind component methods to the drag and drop events. If your component has public methods dragenter, dragover, and drop, you can bind them like this:

<div
  id="drop-area"
  (dragenter)="dragenter($event)"
  (dragover)="dragover($event)"
  (drop)="drop($event)"
>
</div>

Folder Picker

The standard way to upload a file is to have the user click on an input HTML element of type file. This allows users to select multiple files when the multiple attribute is given. HTML5 itself does not support a directory mode for the file picker, but webkit can give us this functionality. Add the webkitdirectory attribute to an input of type file, and it will only allow the selection of folders. Once the user selects their folder, the change event is fired, and the payload is contained in the files property.

<input
    #folderInput
    type="file"
    (change)="filesPicked(folderInput.files)"
    webkitDirectory
>

No directory tree parsing is necessary here because the payload returned is a FileList object containing each of the files that existed at any depth in the selected directory. The webkitRelativePath property of each file contains a string representing the relative path to the directory selected. This string can be parsed to recreate the tree structure from the user’s file system.

function filesPicked(files) {
    for (let i = 0; i < files.length; i++) {
        const file = files[i];
        const path = file.webkitRelativePath.split('/');
	    // upload file using path
        ...
    }
}

The only help Angular offers in this scenario is the ability to easily name the input element for quick reference to avoid a call to document.getElementById.

As you can see, folder upload can be achieved without Angular, though it integrates easily into an existing Angular app. These webkit folder features are currently only supported in Chrome, Firefox, and Edge. Try out a full working version of the code below.