Upload Mutiple Files to Nodejs Angular 6

This postal service will comprehend everything that yous need to know in exercise in guild to handle all sorts of file upload scenarios in an Athwart application.

We are going to learn how to build a fully functional Angular file upload component, that requires a file of a given extension to be uploaded and sends the file to a backend via an HTTP POST call.

This custom component is going to take an upload loading indicator, and it'south going to support upload cancelation likewise. We are going to give also an instance (in Node) of how to handle the file in the backend.

Tabular array Of Contents

In this mail, nosotros will cover the following topics:

• How to upload files in a browser
• Building the user interface of a file upload component
• Selecting a file from the file system using a file upload dialog
• Uploading a file to the backend using the Angular HTTP Client
• How to display a file upload progress indicator
• How to cancel an ongoing file upload
• Handling the uploaded file on a Node backend
• How to upload multiple files
• Summary

So without further ado, allow's become started learning how to build an Angular file upload component!

How to Upload Files in a Browser

In guild to build an Angular file upload component, we need to first understand how to upload files in apparently HTML and Javascript only, and take it from there.

The fundamental ingredient for uploading files in a browser is a plainly HTML input of type file:

This input volition permit the user to open a browser file selection dialog and select one or more files (past default, only one file). Hither is what this input looks like:

With this file input box, y'all tin can select a file from your file organisation, and so with a bit of Javascript, you can already send it to a backend.

Why don't we see file inputs very often?

The trouble with this plain file input is that past default it'southward very difficult to mode. Some styles applied to it tin't exist changed, and we can't even modify the text on the button!

This is default browser beliefs that can't exist changed, and that is why nosotros ordinarily don't see this apparently file input on all the interfaces that we utilize daily, like Gmail, etc.

Because this file input is impossible to style properly, the most common option is to actually never bear witness it to the terminate-user, equally we will meet.

How does the input of type file work?

When the user chooses a file using the file upload dialog, an outcome of type
alter will exist emitted. This issue will then contain the list of files that the user selected on the target.files belongings.

Here is the output that we see on the console after the user selects a file:

When the change consequence gets triggered, the file is not automatically uploaded to the backend by the browser. Instead, we will need to trigger an HTTP request ourselves, in response to the change event.

Now that we know how all the standard file upload browser functionality works, let'southward encounter how can we build a nice Angular component to encapsulate it.

Building the User Interface of a File Upload Component

Because a plainly input of type file is impossible to style properly, what nosotros end upwardly doing is hiding it from the user, and then building an alternative file upload UI that uses the file input behind the scenes.

Here is what the template of an initial file upload component could look similar:

This user interface is split upwards into two separate parts. On elevation, we take a plain file input, that is used to open the file upload dialog and handle the change event.

This plain input text is hidden from the user, as we can see in the component CSS:

Below the hidden file input, we have the file-upload container div, which contains the actual UI that the user will see on the screen.

Every bit an instance, we accept built this UI with Angular Material components, but of form, the alternative file upload UI could have any form that yous similar.

This UI could be a dialog, a drag and drop zone, or similar in the example of our component, but a styled push:

Notice in the component template how the upload blue button and the invisible file input are linked. When the user clicks on the blue push button, a click handler triggers the file input via fileUpload.click().

The user will then choose a file from the file upload dialog, and the change upshot will be triggered and handled by onFileSelected().

Uploading a file to the backend using the Athwart HTTP Client

Let'south now have a expect at our component class and the implementation of
onFileSelected():

Here is what is going in this component:

• nosotros are getting a reference to the files that the user selected by accessing the result.target.files property.
• nosotros then build a form payload past using the FormData API. This is a standard browser API, it's non Athwart-specific.
• we so use the Athwart HTTP customer to create an HTTP asking and send the file to the backend

At this point, nosotros would already have a working file upload component. But we want to take this component one step further. Nosotros want to exist able to display a progress indicator to the user, and likewise back up upload cancelation.

How to Display a File Upload Progress Indicator

We are going to add together a few more elements to the UI of our file upload component. Here is the final version of the file upload component template:

The two principal elements that we accept added to the UI are:

• An Angular Textile progress bar, which is visible only while the file upload is still in progress.
• A cancel upload button, too but visible when an upload is notwithstanding ongoing

How to know how much of the file has been uploaded?

The mode that we implement the progress indicator, is by using the reportProgress feature of the Angular HTTP customer.

With this feature, nosotros tin get notified of the progress of a file upload via multiple events emitted by the HTTP Observable.

To run across it in action, let'due south accept a look at the final version of the file upload component class, with all its features implemented:

As nosotros tin can meet, nosotros have set the reportProgress holding to true in our HTTP call, and we have too prepare the observe property to the value events.

This means that, as the Post phone call continues, we are going to receive issue objects reporting the progress of the HTTP request.

These events volition be emitted as values of the http$ Observable, and come up in dissimilar types:

• events of type UploadProgress written report the percentage of the file that has already been uploaded
• events of types Response written report that the upload has been completed

Using the events of type UploadProgress, nosotros are saving the ongoing upload percentage in a member variable uploadProgress, which we then use to update the value of the progress indicator bar.

When the upload either completes or fails, nosotros need to hibernate the progress bar from the user.

We can make sure that we practise so by using the RxJs finalize operator, which is going to telephone call the reset() method in both cases: upload success or failure.

How to Abolish an Ongoing File Upload

In order to support file upload cancellation, all we accept to is keep a reference to the RxJs Subscription object that nosotros get when the http$ Appreciable gets subscribed to.

In our component, we shop this subscription object in the uploadSub member variable.

While the upload is nevertheless in progress, the user might decide to cancel it by clicking on the cancel button. So the cancelUpload() upload method is going to get triggered and the HTTP request can be canceled by unsubscribing from the uploadSub subscription.

This unsubscription volition trigger the firsthand cancelation of the ongoing file upload.

How to accept only files of a certain type

In the final version of our file upload component, we can require the user to upload a file of a certain type, past using the requiredFileType property:

This property is and then passed straight to the take property of the file input in the file upload template, forcing the user to select a png file from the file upload dialog.

How to Upload Multiple Files

Past default, the browser file choice dialog will permit the user to select merely one file for upload.

But using the multiple property, we can allow the user to select multiple files instead:

Notice that this would need a completely different UI than the one that nosotros have built. A styled upload push with a progress indicator only works well for the upload of a single file.

For a multi-file upload scenario, there are a variety of UIs that could be built: a floating dialog with the upload progress of all files, etc.

Handling the uploaded file on a Node backend

The way that you handle the uploaded file in your backend depends on the applied science that you use, but permit's requite a quick example of how to exercise it if using Node and the Express framework.

We demand to outset install the express-fileupload package. We can and so add together this package equally a middleware in our Express application:

From hither, all we accept to do is define an Express road to handle the file upload requests:

Summary

The best way to handle file upload in Angular is to build one or more custom components, depending on the supported upload scenarios.

A file upload component needs to contain internally an HTML input of type file, that allows the user to select one or more than files from the file system.

This file input should be hidden from the user as it's not styleable and replaced by a more than user-friendly UI.

Using the file input in the background, nosotros can get a reference to the file via the change event, which nosotros tin and so use to build an HTTP asking and transport the file to the backend.

I hope that you have enjoyed this post, if you would like to acquire a lot more about Athwart, we recommend checking the Angular Cadre Deep Dive course, where we will cover all of the avant-garde Angular features in item.

Too, if y'all have some questions or comments please let me know in the comments below and I will get back to yous.

To get notified of upcoming posts on Angular, I invite you to subscribe to our newsletter:

And if yous are merely getting started learning Athwart, accept a look at the Angular for Beginners Course:

manseaubegraced.blogspot.com

Source: https://blog.angular-university.io/angular-file-upload/

Share this post