Angular download file from controller

Add a comment. Active Oldest Votes. Improve this answer. Wasef Anabtawi Wasef Anabtawi 1, 1 1 gold badge 10 10 silver badges 17 17 bronze badges. I am new to MVC — Doc. FileContents, result. FileDownloadName ; — Wasef Anabtawi. Thank you. Show 7 more comments.

Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown.

The Overflow Blog. For Angular 11 , you will find another option to set whether you want to use stricter type or not. Here I am using stricter type and later I will show you how to use stricter type for response and error.

Remember the file extension ts service. Service is one of fundamental blocks of every Angular application. Service is just a TypeScript class with or even without Injectable decorator. Once you create the service class you need to register it under app. Injectable is a decorator that has a property providedIn. When the service is provided at root level, Angular creates a single, shared instance of service and injects into any class that needs it. Registering the provider in the Injectable metadata also allows Angular to optimize an application by removing the service if it is not used.

If you are not using stricter type then your code should be working fine as it is working for Angular First replace the line this. I am also accepting response as Blob Binary Large Object. You may also specify any value from supporting values, such as, json, blob, arraybuffer, text. You can have a look for more details on response type. I have used three ways for downloading file — two ways for Save as functionality and one way to show the file content on browser itself. The above line create a Blob object with file content in response and expecting the file of JSON type.

We will create a specific component for each operation, Upload and Download, and we will use it from a FileManager component, that shows the list of downloaded files. Compared to the classical use of HttpClient, that you can display in the method getFiles , in dowloadFile and uploadFile we use the request method, that permits us to specify a HttpRequest with all its options, among them the option reportProgress set on true.

This option enables us to receive updates on the exchange data status between client and server. We can see that in our Upload component:. As you can see, the subscription to the observable returned from the HttpClient gives us an HttpEvent type object, which property type can acquire one of these five values:.

If you want to level out events between upload and download and abstract us from the http library, we add our enumeration and our interface to the project:. Clicking on the button, the input selection window will open, allowing the user to select a file.

On the input change, we recall the component upload method. As the operation ends, both in case of success and of error, you need to clean out selection input, or it would not be possible to make the upload of the same file consecutively. To do that, you can use both ReactiveForm and associate it a FormControl to the input, and with ngModel , cleaning out the bound property. We can make a similar procedure for the download, but we should insert a further requisite: we want to download the file, update the progress and supply the downloaded file to a user with no more interaction.

The component logic is very similar to that of the upload, but, as we know, once the download is terminated, we want to supply the file to user immediately.

After that, we can delete the created anchor. Ugly, maybe. The better thing to do would probably be to move the whole manipulation part in a guideline, but, for the purposes of our reasoning, it would not make the much difference: I leave it to you as exercise! We use both component from the FileManager component and there you have it. HTML will be as follow:. The component logic will limit itself to recover the list of available files and to show the upload and download status, based on events received from sons components:.

See author's posts. Stay updated. How to upload and download files with an Angular front-end and an Asp. Net Core back-end. Uploading and Downloading files with Angular and Asp.

Net Core.