DZone
Web Dev Zone
Thanks for visiting DZone today,
Edit Profile
  • Manage Email Subscriptions
  • How to Post to DZone
  • Article Submission Guidelines
Sign Out View Profile
  • Post an Article
  • Manage My Drafts
Over 2 million developers have joined DZone.
Log In / Join
  • Refcardz
  • Trend Reports
  • Webinars
  • Zones
  • |
    • Agile
    • AI
    • Big Data
    • Cloud
    • Database
    • DevOps
    • Integration
    • IoT
    • Java
    • Microservices
    • Open Source
    • Performance
    • Security
    • Web Dev
DZone > Web Dev Zone > How to Handle Folder Uploads in Angular 2+

How to Handle Folder Uploads in Angular 2+

In this post, we examine how you can create a file upload functionality within your Angular-based web application. Read on for more!

Ben Jacobson user avatar by
Ben Jacobson
·
Jan. 22, 18 · Web Dev Zone · Tutorial
Like (5)
Save
Tweet
22.00K Views

Join the DZone community and get the full member experience.

Join For Free

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 the 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 the ability to easily bind component methods to the drag and drop events. If your component has the 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.

Upload AngularJS Directory

Published at DZone with permission of Ben Jacobson, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

Popular on DZone

  • How to Hash, Salt, and Verify Passwords in NodeJS, Python, Golang, and Java
  • How to Test JavaScript Code in a Browser
  • Migrating From Heroku To Render
  • Testing Under the Hood Or Behind the Wheel

Comments

Web Dev Partner Resources

X

ABOUT US

  • About DZone
  • Send feedback
  • Careers
  • Sitemap

ADVERTISE

  • Advertise with DZone

CONTRIBUTE ON DZONE

  • Article Submission Guidelines
  • MVB Program
  • Become a Contributor
  • Visit the Writers' Zone

LEGAL

  • Terms of Service
  • Privacy Policy

CONTACT US

  • 600 Park Offices Drive
  • Suite 300
  • Durham, NC 27709
  • support@dzone.com
  • +1 (919) 678-0300

Let's be friends:

DZone.com is powered by 

AnswerHub logo