Angular Material File Uploader
A guide for creating a Material themed file uploader in Angular
File uploader is one component which is missing in both the Angular Material as well as the Material docs.
In this article, we will create one sample file uploader component that has the following features —
- Files can be selected both by clicking a button and by drag-and-drop.
- Each file can be separately uploaded to the API endpoint or all at once.
- Each file upload can be tracked separately for updates from the API.
- Files must belong to a set of allowed MIME types to be eligible for upload and in case they are not, relevant messaging must be shown.
Prerequisites
- Angular Material needs to be included in the codebase. For help on including and theming, you can refer to this guide —
Optimized Angular Material Setup - We will be using the following Angular Material components which have to be imported in the module where the file uploader component will reside — MatExpansionModule, MatProgressBarModule, MatTooltipModule, MatDialogModule, MatSnackBarModule and MatRippleModule.
- I have referred to custom methods like serviceWrapper() that I use in my Angular applications. For an insight on how I work with APIs, you can refer to this article — Optimized Service/ API Integration for Angular
Design
While the underlying file transfer mechanism is something to be figured out, the design of such a component is also an important piece in this puzzle.
In this section, we will design the static view of the component based on our requirements highlighted at the start of this article.
The component will have the following states/views —
- The empty file upload ‘workspace’ i.e. the default view.
2. A file has been selected. The file name will be visible along with the action buttons for uploading and cancelling the selection.
3. Upload has been initiated. The upload button will be disabled and a progress bar will be displayed. Cancelling now should prompt the user for confirmation.
4. Upload completed. There can be two scenarios — success and error. For error scenario, the user will have the option to retry the upload.
5. Multiple file upload. For multiple files, two buttons will get activated beside the “Browse Files” button — one for uploading all the selected files at once and the other for cancelling all of them. The button for uploading multiple files would be deactivated if there are no files to be uploaded i.e. all files that were selected were all uploaded successfully.
Integrating Logic
Now that the static component is ready, we can now proceed to integrate the logic and tie the above-mentioned views together so that it starts functioning as a file uploader.
Drag-and-Drop Directive
We will start by creating a directive drag-and-drop-directive that will enable us to drop files on a given element. As this directive is common across the application, it will be declared inside the module for shared utilities.
ng g d modules/__shared-utilities/drag-and-drop-directive/drag-and-drop- --module=modules/__shared-utilities/shared-utilities.module.ts
Next, we will thank Mariem Chaabeni for her wonderful guide before proceeding with the next steps.
File Uploader Component
We will create a stand-alone component modhyobitto-file-uploader that can be included in any parent component which will be able to customize by setting the specific configuration like allowed MIME types, API URL and other data as might be needed. Like the directive above, this will also be included in the module that houses the shared utilities.
We will include a hidden native file selector which will be triggered when we will click on the “Browse Files” button. For the upload, we will use FormData interface to wrap the file and send it across to the API.
Parent Component
From the parent component, we need to include the file uploader component selector along with the configuration as required. For our sample page, we will allow PDF files only.
Next Steps
You can refer to my Git repo for all the code. The working example in the sample application can be accessed from the “File Uploader” page —
