AngularFire Storage: Build a Drag & Drop File Uploader in Angular

Introduction

Firebase Storage is now seamlessly integrated with AngularFire 2, streamlining file uploads from your Angular applications. This blog post will guide you through the features of the AngularFire 2 storage module, and we'll build a drag-and-drop file uploader from the ground up.

Understanding AngularFire Storage

The AngularFire 2 storage module simplifies the process of uploading files to Firebase Storage. When a user drags and drops a file, AngularFire initiates an upload task, which immediately begins transferring the file to your Firebase Storage bucket. You can then monitor the upload's progress through an observable, receiving snapshots multiple times per second to update progress bars or provide user feedback. Once the upload is complete, you'll receive a download URL to display in your front-end UI.

Creating a Drag-and-Drop Directive

To enable drag-and-drop functionality, you'll create an Angular directive. This directive will be applied to an HTML element, emitting custom events based on drag-and-drop actions. Using @HostListener, @Output, and EventEmitter, you can create custom events.

First, define the custom events:

• dropped: Emits a FileList containing the dropped files.
• hovered: Emits a boolean indicating whether the user is hovering over the element.

Then, use @HostListener to listen for browser events like drop, dragover, and dragleave, preventing the default browser behavior and emitting the corresponding custom events.

Building a File Upload Component

This component will demonstrate the functionality of the AngularFire storage module. Start by importing AngularFireStorage and AngularFireUploadTask. Declare variables to manage the upload task, track progress (percentageChanges), access snapshot data, and retrieve the download URL.

Inject AngularFireStorage into the constructor. The startUpload method handles the upload process. It takes a FileList from the directive as input and extracts the first file. You can implement client-side validation (e.g., ensuring only image files are uploaded) by checking the file's MIME type. This validation should be mirrored in your Firebase Storage rules for full-stack security.

To define the upload task, call storage.upload, passing the file path, the file itself, and optional custom metadata. The upload process starts immediately, and you can monitor progress by listening to the percentageChanges and snapshotChanges observables. The downloadURL observable emits once the upload is complete.

Here's how to define the upload task:

const task = this.storage.upload(filePath, file, { customMetadata });

Displaying Upload Progress and Managing the Upload

In the HTML template, use the custom drop zone directive on a div element. Bind the hovered event to toggle CSS classes and the dropped event to the startUpload method. Provide a standard file upload button (input type="file") for mobile devices, binding its change event to the same startUpload method.

Display the upload progress using the percentage observable, unwrapping it with the async pipe and using it as the value of a progress bar. You can also unwrap the snapshot to display more detailed information, such as bytes transferred and total bytes, using a custom pipe for formatting.

Implement pause, cancel, and resume buttons by binding their click events to the corresponding methods on the upload task (task.pause(), task.cancel(), task.resume()). Disable these buttons based on the current state of the upload, using the isActiveHelper function to determine if the upload is active or paused.

Conclusion

By leveraging AngularFire 2's storage module and creating a custom drag-and-drop directive, you can easily build a user-friendly file uploader in your Angular applications. Remember to implement both client-side and server-side validation, provide informative feedback to the user, and manage the upload process using the task's control methods. Connecting your file storage to Firestore allows you to easily retrieve and manage your files within your application data.

Keywords:

• AngularFire Storage
• Firebase Storage
• Angular File Upload
• Drag and Drop Uploader
• Angular Directive