Only Allow Users to Upload a Certain File Type Angular

Athwart File Upload

We will know that how to create a functional Athwart file upload component that requires a file of a given extension to be uploaded and sends the file to the backend via an HTTP Mail service call.

The custom component will take an upload loading indicator and will support upload cancellation. Nosotros will give an example (in Node) of handling a file in the backend.

How to Upload Files to the Browser

To create an Angular file upload component, we starting time demand to understand how to upload files in plain HTML and JavaScript and take it from there.

The main component for uploading files to the browser is a plain HTML input of the file type:

This input will permit the user to open up the browser file option dialog and select 1 or more files (by default). Here'southward what the input looks like:

You can select a file from file input box, and and so with a little JavaScript, you tin can send information technology to the backend.

Why don't nosotros run into file input oftentimes?

The problem with this manifestly file input is that it'due south very hard to fashion by default. Some applied styles tin can't exist inverse, and we tin can't fifty-fifty alter the text on the button!

It is the default browser behavior that cannot exist changed and is the reason why we don't see this plain file input on the interfaces we use daily, like Gmail, etc.

Because it is impossible to manner this file input properly, the about common option is never to show it to the end-user.

How does the input of type file piece of work?

When the user selects a file using the file upload dialog, an outcome of blazon

The change volition be emitted. The result volition then incorporate the listing of files the user has selected on the target.

Here is the output we meet on the panel afterwards the user selects the file:

{   lastModified: 1601984029839   lastModifiedDate: Tue Oct 06 2020 thirteen:33:49 GMT+0200 (Primal European Summer Fourth dimension)    proper name: "angular-forms-course-small-scale.jpg"   size: 56411   type: "image/jpeg"   webkitRelativePath: "" }

When the change event is triggered, the browser's file is not automatically uploaded to the backend. Instead, nosotros'll need to trigger an HTTP request ourselves in response to the change event.

Creating the User Interface of the File Upload Component

Information technology is impossible to properly style a plain input of a file, nosotros hide it from the user and then build an alternating file upload UI that uses the file input backside the scenes.

Template for the initial file upload component:

The user interface is divided into two dissimilar parts. At the top, we have a plain file input, which is used to open the file upload dialog and handle the change event.

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

We have the file-upload container div, which contains the bodily UI that the user tin see on the screen.

For case, we built this UI with Angular Material components, but of class, the optional file upload UI can accept any form you lot like.

This UI can exist a dialog, a drag and drop zone, or, as in the case of our component, simply a styled push button:

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

The user would then select a file from the file upload dialog, and the modify upshot would be triggered and handled by onFileSelected().

Uploading file to backend using Angular HTTP client

Now permit's take a wait at our component form and implementation onFileSelected():

Here is the component:

We are getting a reference to the files that the user has selected by accessing events. Target. Files belongings.

Then we create the form payload using the FormData API. Information technology is a standard browser API and is not Angular-specific.

We use the Angular HTTP client to make HTTP requests and transport the file to the backend.

At this point, we will already accept a working file upload component.

How to display file upload progress indicator

We are calculation a few more elements to the UI of our file upload component. Here is the file upload component template:

The two master elements we've added to the UI are:

An Angular Material progress bar, which is visible only when the file upload is nevertheless in progress.
An Upload Cancel button, also visible just if an upload is still in progress

How do you know how much file has been uploaded?

We implement the progress indicator past using the report progress feature of the Angular HTTP client.

With this feature, nosotros can become notified of the progress of file uploads through multiple events emitted by HTTP Observables.

To see this in action, let's take a look at the last version of the FileUpload component class, which has all its features implemented:

As we can see, we have fix the ReportProgress property to true in our HTTP call, and we have also set the Overview property in the Value event.

We volition receive an event object reporting the progress of the HTTP request.

These events volition be emitted as the value of http$observable and come up in different types:

Upload Progress type events report the percentage of a file that has already been uploaded.
Events of the type Feedback report that the upload is consummate
By using events of blazon UploadProgress, we are saving the ongoing upload per centum in a fellow member variable UploadProgress, which we use to update the value of the progress indicator bar.
When the upload completes or fails, we need to hide the progress bar from the user.

We can be sure to do this by using the RxJs finalize operator, which will call the reset() method in both cases: upload success or failure.

How to abolish an ongoing file upload

To support file upload cancellation, we must refer to the RxJs subscription object when the http$observable is subscribed.

In our component, nosotros shop this membership object in the uploadSub member variable.

While the upload is even so in progress, the user tin cancel information technology by clicking the Abolish button. Then the cancelUpload() upload method is invoked, and the HTTP request can exist canceled by unsubscribing from the UploadSub subscription.

Canceling this subscription will immediately abolish the ongoing file upload.

How to have certain blazon of files

In the final version of our file upload component, we tin can crave the user to upload a certain type of file using the required file type property:

This property is passed to the file input'southward take property in the file upload template, forcing the user to select a PNG file from the file upload dialog.

How to Upload Multiple Files

The browser file selection dialog volition let the user to select only one file to upload by default.

But by using the Multiple properties, nosotros can permit the user to select multiple files:

Annotation that this will require a complete different UI than the one we created. A style upload button with a progress indicator works well for uploads of only one file.

For a multi-file upload scenario, various UIs can be created: a floating dialog with the upload progress of all files, etc.

Handling uploaded file on node backend.

The manner you lot handle an uploaded file in your backend depends on the technology you lot use, but let'southward requite a quick instance of how to do it using the Node and Express frameworks.

We need to install the express-fileupload package get-go. Then nosotros tin add this bundle as middleware to our express application:

We take to do is define an express route to handle file upload requests:

Summary

The best style to handle file uploads in Angular is to build one or more custom components based on the supported upload scenarios.

The file upload component must comprise an HTML input blazon file that allows users to select one or more files from the file system.

This file input is hidden from the user as information technology is not stylable and should be replaced past a more than user-friendly UI.

By using the file input in the groundwork, we can refer to the file through the change event, which we tin can then use to make an HTTP request and send the file to the backend.

robinsonnevery1973.blogspot.com

Source: https://www.javatpoint.com/angular-file-upload