Sucessful Upload of the File

This mail service will cover everything that you demand to know in practice in order to handle all sorts of file upload scenarios in an Angular application.

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

This custom component is going to have an upload loading indicator, and it's going to back up upload cancelation as well. We are going to give also an example (in Node) of how to handle the file in the backend.

Table Of Contents

In this post, 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 Athwart HTTP Client
• How to display a file upload progress indicator
• How to abolish an ongoing file upload
• Handling the uploaded file on a Node backend
• How to upload multiple files
• Summary

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

How to Upload Files in a Browser

In club to build an Angular file upload component, we need to first sympathise how to upload files in plain HTML and Javascript only, and take it from in that location.

The key ingredient for uploading files in a browser is a obviously HTML input of type file:

This input will permit the user to open a browser file choice dialog and select i or more than files (by default, only one file). Here is what this input looks similar:

With this file input box, you can select a file from your file organization, and and so with a bit of Javascript, you tin already transport information technology to a backend.

Why don't we see file inputs very frequently?

The problem with this plain file input is that by default it's very difficult to style. Some styles practical to it can't be inverse, and we can't even modify the text on the button!

This is default browser behavior that tin't be changed, and that is why we ordinarily don't see this manifestly file input on all the interfaces that we use daily, similar Gmail, etc.

Considering this file input is impossible to way properly, the virtually common option is to actually never prove it to the end-user, every bit we volition see.

How does the input of type file work?

When the user chooses a file using the file upload dialog, an event of blazon
change will be emitted. This outcome will and so contain the list of files that the user selected on the target.files holding.

Here is the output that we meet on the console later the user selects a file:

When the change event 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 upshot.

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

Edifice the User Interface of a File Upload Component

Considering a plain input of type file is impossible to way properly, what we cease up doing is hiding information technology from the user, and then building an culling 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 dissever upwardly into two divide parts. On acme, nosotros have a manifestly file input, that is used to open the file upload dialog and handle the modify event.

This manifestly input text is hidden from the user, as nosotros tin can run across in the component CSS:

Below the hidden file input, nosotros take the file-upload container div, which contains the actual UI that the user volition see on the screen.

Every bit an instance, nosotros have built this UI with Angular Material components, merely of grade, the culling file upload UI could take any course that you like.

This UI could be a dialog, a elevate and drib zone, or like in the case of our component, only a styled button:

Notice in the component template how the upload blue button and the invisible file input are linked. When the user clicks on the blue 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 alter event will exist triggered and handled past onFileSelected().

Uploading a file to the backend using the Angular HTTP Customer

Allow's now have a wait at our component class and the implementation of
onFileSelected():

Here is what is going in this component:

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

At this signal, we would already have a working file upload component. But nosotros want to take this component one pace farther. We desire to be able to brandish a progress indicator to the user, and also support upload cancelation.

How to Brandish a File Upload Progress Indicator

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

The 2 chief elements that we have added to the UI are:

• An Angular Material progress bar, which is visible merely while the file upload is still in progress.
• A cancel upload button, also only visible when an upload is still 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 characteristic of the Athwart HTTP client.

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

To run across information technology in activity, let's take a look at the final version of the file upload component form, with all its features implemented:

As we can see, we have fix the reportProgress holding to true in our HTTP telephone call, and we have likewise set the notice belongings to the value events.

This means that, as the Postal service telephone call continues, we are going to receive upshot objects reporting the progress of the HTTP request.

These events will exist emitted as values of the http$ Observable, and come up in different types:

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

Using the events of blazon UploadProgress, we are saving the ongoing upload percentage in a member variable uploadProgress, which we then utilize 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 call the reset() method in both cases: upload success or failure.

How to Cancel an Ongoing File Upload

In order to back up file upload cancellation, all we take to is keep a reference to the RxJs Subscription object that we get when the http$ Observable gets subscribed to.

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

While the upload is all the same in progress, the user might determine to cancel information technology by clicking on the cancel push. Then the cancelUpload() upload method is going to go 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 take only files of a certain type

In the final version of our file upload component, nosotros can require the user to upload a file of a sure blazon, by using the requiredFileType property:

This property is then passed directly to the accept belongings 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

By default, the browser file selection dialog will permit the user to select only one file for upload.

But using the multiple belongings, nosotros can allow the user to select multiple files instead:

Notice that this would demand a completely unlike UI than the one that we have built. A styled upload push button with a progress indicator only works well for the upload of a unmarried file.

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

Treatment 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 apply, only let's requite a quick example of how to do it if using Node and the Express framework.

We need to kickoff install the limited-fileupload packet. We tin can then add this package every bit a middleware in our Express application:

From hither, all nosotros have to practice is define an Limited route to handle the file upload requests:

Summary

The best mode to handle file upload in Angular is to build ane 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 1 or more than files from the file arrangement.

This file input should be hidden from the user as information technology'due south not styleable and replaced by a more user-friendly UI.

Using the file input in the background, we can go a reference to the file via the modify effect, which we tin can and so use to build an HTTP asking and transport the file to the backend.

I hope that y'all have enjoyed this post, if you would like to learn a lot more than about Athwart, we recommend checking the Angular Core Deep Dive course, where we will cover all of the advanced Angular features in particular.

Also, if y'all have some questions or comments please let me know in the comments below and I volition become dorsum to you.

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

And if you lot are but getting started learning Athwart, have a wait at the Angular for Beginners Grade:

joneswilicul1963.blogspot.com

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

Share this post