Angular File Download From API | Download File Using Angular

Angular File Download From API | Download File Using Angular
This video has demonstration of downloading file using angular from Rest API. I have shown Download file using angular in a detailed way in this video.
---------------------------------------------------------------------------------------------
--------------------------------------------------------------------------------------------
In the component, we have to add dependency of the created service and subscribe to the download method of the service to download file using angular. In the subscribe method, we have to read the response header to get the file name which is being returned from Rest API. The header will have content-disposition, we need to split it by semi colon(;) and then by equals(=) to get the file name. Then we have to create Blob from the Response Body. Response Body will have file content that we do file download in angular. We have to create a hyperlink. Its href should be URL form of Blob which we can get using window.CreateURLFromObject and the file name should be mentioned in download property of the hyperlink.
--------------------------------------------------------------------------------------------
You may encounter CORS issue if the angular app is running on a different url and the api is running at the different url. CORS should be enabled at the API end. CORS will add the required headers to allow angular download file.
As we are reading the file name from api while downloading the file in angular, at the api end, it should allow reading content-disposition header.
---------------------------------------------------------------------------------------------
#AngularDownloadFileRestAPI# #AngularDownloadFile# #AngularFileDownloadFromAPI#
Chapters
00:00 - Intro

[phanikeshavvarma]

This solution really helped me in downloading the file without changing the "FILENAME". Thank you very much & keep posting on angular.

[_akos]

I had been struggeling for the last 2 days. You made my day Happy Dude!!! Thank you !!!

[bearmanthemovie]

Man thank you very much! You helped me a lot!

God bless your soul!

[arasappanmageshwaran]

super... thanks for your wonderful solution

[SonalKate-ccie]

Can you please tell how this can be done for a post request from api?

[Kajalchopade-rxxz]

I don't have cs file could you please help with last step where you changed configuration. I have back-end in python and front end in angular.

[kodenix]

Remember allow 'Content-Disposition' in the API response header, in many frameworks is disable by default, it is possible setting with in the api response

[plantundead]

Hi, Do you have a tutorial on how to upload excel file and select which sheet to upload?: For example: I'm uploading a Sample.xls. that file has 3 sheets, I want to upload the sheet 2 only. is that possible?

[thatcuriousduo]

Thank you so much for this video. but I cannot get response.body as Blob. Do you mind console logging your response body? when i download file with this code it contains the whole response. is it a backend issue or frontend

[johndumont]

If I download an image, is there anyway to make the image a svg instead of png?

[bhargavtsapparapu]

for me it's working but there is some delay in edge but in network, I can see the blob response, how can we fix this

[phanikeshavvarma]

Can please make a video on GLOBAL ERROR HANDLER, HTTP INTERCEPTORS, AUTH GUARDS using rest API's realtime scenario's.

[dorrakadri]

i have a problem my header only contains the type and lenfth and in swagger i have the same header as you duuno why i cant access to the header

[hustleopgaming]

I'm Still not able to download pdf, From API..Will you plz help me out.

[seharabid]

the same method does not work for angular application on mobile phones

[mythicpink]

I like your video but cannot stand the loud bell chime that happens nearly every minute. In this 8 minute video, the bell rings 7 times. It's really annoying.

[hirendrachandani]

Helli Can You Pleas Share Also Sever side Code ?

[av]

Hey, Thanks for the video. But I'm getting this error. How do I resolve it ?
Unexpected token '�', "�� ࡱ �"... is not valid JSON at JSON.parse.