Material angular file download

File upload is useful when we want users to upload their documents in order to keep or verify them for instance in case we have an employee and we want to verify the document of the employee. In such a case, we can use the material file upload module to implement this functionality in one o. If we try to implement our own it will take some time and also we are required to write so much code in order to work it, so by using the material file upload module we do not have to write so much code, it will take care of by material.

In the coming section of the tutorial, we will have closer look at the internal working and step-by-step implementation for better clarity and understanding. We can directly use these tags to upload our file or multiple files if any. In order to use the material file upload we have to install the external dependency for this. It does not come up with material default dependency we have to install this explicitly by executing some command.

For reference please have look at the below code which needs to be placed in the root module. It also provides us some more property which is as follows:.

Now we will see the steps required to setup file upload as well as material inside your angular application. Finally, we click the link like the user would've done with a regular browser download link. After the file is downloaded, we'll discard the blob by revoking the object URL we created.

This approach is pretty verbose though and might not work smoothly for every browser. Therefore I'd advise you to use the popular library FileSaver. The saving then becomes a one-liner:. If you don't like adding a dependency for this and would prefer to use the manual approach shown before, you might as well refactor the code for saving the blob into a separate service.

You can also create a custom injection token for URL - also see below how we'll do this for FileSaver. By setting the option observe to events while making an HTTP request, we won't just receive the final response body of the request but also get access to intermediate HTTP events. We also need to explicitly pass the option reportProgress in order to receive HttpProgressEvents. Our HTTP request will eventually look like follows:. Since we don't just want to forward these events to every component, our service has to do some more work.

Otherwise our component would have to deal with HTTP specifics - that's what services are for! Instead let's introduce a data structure representing a download with progress:. A Download can be in one of three states. Either it hasn't started yet, therefore it's pending. Otherwise it's done or still in progress.

We use TypeScript's union types to define the different download states. Additionally, a download has a number indicating the download progress from 1 to Once a download is done, it will contain a Blob as its content - until then this property is not available, therefore null.

Now we want to abstract from specific HTTP events to our newly defined data structure. This way our components can be decoupled from the underlying network protocol. Since we're dealing with multiple events coming in over time, a RxJS operator is well suited here - so let's create one! The first step for this will be the creation of type guards helping us to distinguish different HTTP events.

This way we can access event-specific fields in a type-safe way. They both contain the discriminator field type allowing us to easily return a boolean for the type assertion in our guards. The guards can be used with a simple if-statement, however, TypeScript will narrow the event type inside the statement block for us:. Based on these guards we can now create our custom operator.

We can make sure that we do so by using the RxJs finalize operator, which is going to call the reset method in both cases: upload success or failure. In our component, we store this subscription object in the uploadSub member variable. While the upload is still in progress, the user might decide to cancel it by clicking on the cancel button. Then the cancelUpload upload method is going to get triggered and the HTTP request can be canceled by unsubscribing from the uploadSub subscription.

In the final version of our file upload component, we can require the user to upload a file of a certain type, by using the requiredFileType property:. This property is then passed directly to the accept property of the file input in the file upload template, forcing the user to select a png file from the file upload dialog. By default, the browser file selection dialog will allow the user to select only 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 we have built. A styled upload button 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.

The way that you handle the uploaded file in your backend depends on the technology that you use, but let's give a quick example of how to do it if using Node and the Express framework.

We need to first install the express-fileupload package. We can then add this package as a middleware in our Express application:. 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 files from the file system.

This file input should be hidden from the user as it's not styleable and replaced by a more user-friendly UI. Using the file input in the background, we can get a reference to the file via the change event, which we can then use to build an HTTP request and send the file to the backend.

I hope that you have enjoyed this post, if you would like to learn a lot more about Angular, we recommend checking the Angular Core Deep Dive course, where we will cover all of the advanced Angular features in detail. Also, if you have some questions or comments please let me know in the comments below and I will get back to you. And if you are just getting started learning Angular, have a look at the Angular for Beginners Course :.

Table Of Contents In this post, we 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, let's get started learning how to build an Angular file upload component!

How to Upload Files in a Browser In order to build an Angular file upload component, we need to first understand how to upload files in plain HTML and Javascript only , and take it from there.

The key ingredient for uploading files in a browser is a plain HTML input of type file: This input will allow the user to open a browser file selection dialog and select one or more files by default, only one file. Here is what this input looks like: With this file input box, you can select a file from your file system, and then with a bit of Javascript, you can already send it to a backend.

Why don't we see file inputs very often? How does the input of type file work?