Angularjs Ng File Upload Type File Validation

Angular File Upload

We will know that how to create a functional Angular 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 phone call.

The custom component will have an upload loading indicator and will support upload cancellation. We volition give an example (in Node) of treatment a file in the backend.

How to Upload Files to the Browser

To create an Athwart file upload component, nosotros get-go demand to understand how to upload files in evidently HTML and JavaScript and take it from in that location.

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

This input will allow the user to open the browser file selection dialog and select i or more than files (by default). Here's what the input looks like:

You can select a file from file input box, and then with a piddling JavaScript, you tin can send it to the backend.

Why don't we run across file input ofttimes?

The problem with this plainly file input is that it'due south very difficult to style by default. Some applied styles can't exist changed, and we tin't even modify the text on the push!

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

Considering it is impossible to style this file input properly, the near mutual choice is never to testify it to the end-user.

How does the input of type file work?

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

The change will be emitted. The issue will and so contain the listing of files the user has selected on the target.

Hither is the output we see on the console subsequently the user selects the file:

{   lastModified: 1601984029839   lastModifiedDate: Tue Oct 06 2020 13:33:49 GMT+0200 (Central European Summer Time)    proper name: "angular-forms-grade-small.jpg"   size: 56411   type: "image/jpeg"   webkitRelativePath: "" }

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

Creating the User Interface of the File Upload Component

Information technology is incommunicable to properly style a patently input of a file, nosotros hide it from the user and so build an alternate file upload UI that uses the file input behind the scenes.

Template for the initial file upload component:

The user interface is divided into 2 dissimilar parts. At the top, nosotros 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 actual UI that the user can see on the screen.

For example, we congenital this UI with Athwart Fabric components, merely of course, the optional file upload UI tin take any grade you similar.

This UI can be a dialog, a elevate and driblet zone, or, as in the case of our component, simply a styled push button:

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

The user would and so select a file from the file upload dialog, and the change event would exist triggered and handled past onFileSelected().

Uploading file to backend using Angular HTTP customer

Now allow'due south have a expect at our component grade and implementation onFileSelected():

Hither is the component:

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

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

We use the Athwart HTTP customer to make HTTP requests and send the file to the backend.

At this point, nosotros will already have a working file upload component.

How to display file upload progress indicator

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

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

An Athwart Material progress bar, which is visible merely when the file upload is withal in progress.
An Upload Abolish push button, also visible only if an upload is still in progress

How practise you know how much file has been uploaded?

We implement the progress indicator by using the study progress feature of the Angular HTTP client.

With this feature, we tin can get notified of the progress of file uploads through multiple events emitted past HTTP Observables.

To run into this in activity, let'due south take a look at the final version of the FileUpload component class, which has all its features implemented:

Every bit nosotros tin see, we have set up the ReportProgress property to true in our HTTP call, and we have as well set up the Overview property in the Value result.

We will receive an consequence object reporting the progress of the HTTP request.

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

Upload Progress blazon 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 type UploadProgress, we are saving the ongoing upload percentage in a 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 certain to practice this by using the RxJs finalize operator, which will call the reset() method in both cases: upload success or failure.

How to cancel 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, we store this membership object in the uploadSub member variable.

While the upload is still in progress, the user can abolish information technology past clicking the Cancel button. So the cancelUpload() upload method is invoked, and the HTTP request can be canceled by unsubscribing from the UploadSub subscription.

Canceling this subscription will immediately cancel the ongoing file upload.

How to have certain blazon of files

In the final version of our file upload component, nosotros tin require the user to upload a certain blazon of file using the required file blazon property:

This property is passed to the file input's accept 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 will allow the user to select merely ane file to upload by default.

Merely by using the Multiple backdrop, we can allow the user to select multiple files:

Notation that this volition require a complete unlike UI than the one we created. A way upload button with a progress indicator works well for uploads of merely ane 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 mode you handle an uploaded file in your backend depends on the engineering science you use, but let'south requite a quick example of how to do information technology using the Node and Express frameworks.

We need to install the express-fileupload package first. And then nosotros can add this parcel equally middleware to our limited application:

Nosotros have to do is ascertain an express route to handle file upload requests:

Summary

The all-time way 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 contain an HTML input type 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 by a more convenient UI.

Past using the file input in the background, we tin can refer to the file through the change event, which we can then utilize to make an HTTP request and transport the file to the backend.

brownspait1984.blogspot.com

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