How to download files in React JS | Download file instead of opening in browser | React CSV Download

#reactjs #download #CodeWithAamir
In this video tutorial I have explained how to download files in React JS application. Also explained how to download files instead of opening in a browser tab by showing different example files like csv file download, pdf file download, png file download or any zip file download in React JS.

This video focuses on
- How to download files in React JS
- How to download file instead of opening in browser tab
- React CSV Download implementation
- How to download pdf file in react app
- How to download zip files in react app using a tag download function
- How to create download file at url function to download any file as a blob
- How to create blob from a server file
- How to download a blob in react
- How to fetch files in react and create blob to download
- React file download using document a tag
- How to trigger download file using react components
- How to create download file button in react
- Download file on button click in react apps

In this video tutorial we used localhost files but the idea will work for any url you can get from your server API response etc. so you have to pass that url to the download function "downloadFileAtURL" we created in the video and it should download the files. If you face any issues, please let me know if comments below. Thanks

- Happy Coding

[ytpeerz]

Tried to download an image on firebase storage, it didn't download it instead opened the URL like a regular a-tag behaviour. Apparently the download attribute won't work for files not on the same origin.

[ivan]

It solves the problem, but I don't like such a massive amount of direct dom manipulations in react. There should be some "react way" instead of pushing the same old vanilla js solution in there.

[TwistIO]

the file downloaded gives failed to open error. im using brave browser. also tried on edge, same error. the downloaded file is only 1kb in size.

[arnaudpoutieu]

You made my day!
Your content is quite insightful and I have been progressing very well based on your videos.
One topic that could be great if possible for you, is how to tacle responsiveness of an antd dashboard application (for instance a view displaying let say 3 cards with stats all aligned horizontally, then a table and a timeline aside it, both aligned horizontally)

[RajeevSharma-peum]

I am trying for csv file which is in my public folder..but its not working...please help

[NeerajKumar-wkqq]

very helpful tutorial, Thank you sir.

[ashishgupta]

Hi, I have tried your approach and it is working fine, but I wanted to download it from an API response where I have given the static file path. but actually it should downloaded the targeted file and there is it is showing error. Kindly guide.

[harisgunasekaran]

What if I deploy my website, in that case in URL you cannot have localhost:3000 so what should be the replacement?

[dwwgipu]

Hi Aamir, Nice video. Can you give more explanations about the atag part please ? i'm not sure i'm getting it.

[misiu]

Why react download me blank pdf from laravel local server? Link in laravel to download is correct so problem is in react?

[hakan]

you are a blessed to react and ant design world

[ganesans]

Shall I use this approach for downloading big mp4 files?

[pfkdckf]

HI amir, I wanted to make a site where my mobile app users could download the latest apk of the app. So, is there way to open the file automatically after the download is complete. I know it is a hard question. Thank you man for your support.

[blal]

Hi, Amir, I think it works fine for the same origin, but I need to download the file from the API folder. In this case, I followed your approach, but it open the file instead of downloading, please guide me

[TheJulio]

Hi Amir, I was following the YouTube video, but towards the end, the code is not shown completely. Can you share the code you used in the video?

[_acky]

what if I upload it on github pages ? will it work ?, also it will change the host address right ? will it still work ?

[prakash_singh]

Does this work after I deploy my project on netlify ?

[hakan]

Aamir, can you do a video on pagination with api with the search field results. So, on the next page, while pagination, the results stay.

[EvorsorGaming]

Does it work too when converting reactjs to apk with capacitor?

[kashimjakati]

The pdf is downloaded but it is not opening why