How to download files in React JS | Download file instead of opening in browser | React CSV Download
HTML-код
- Опубликовано: 3 янв 2023
- #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
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.
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.
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)
Glad to hear 🎉
Thank you @Arnaud POUTIEU
Hi @Arnaud POUTIEU,
Building Dashboard app using Antd video tutorial is in my queue, so may be if possible can you please send me screenshot or something on my email aamircodewith@gmail.com so I can try to tacle your usecase as well.
Thanks
@@CodeWithAamir Sure Aamir. I will email you today with a prototype. Many gratitudes!!!
Thank you @Arnaud POUTIEU
Really appreciated.
Hi @Arnaud POUTIEU
Here you go with the Dashboard tutorial using React and Ant Design. Pleas let me know with you feedback on that.
ruclips.net/video/xvBUgdKUz5g/видео.html
Thanks
Awesome! Thanks a lot man!! 🚀🚀
So nice of you !
I am trying for csv file which is in my public folder..but its not working...please help
very helpful tutorial, Thank you sir.
Glad it was helpful!
Very very effective tutorial👍👍👍
Thank you! Cheers!
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.
Hi Aamir, Nice video. Can you give more explanations about the atag part please ? i'm not sure i'm getting it.
Hi @Loïc Guégan
The aTag part is actually we are creating a component and assigning an href to it so that when we click on it it will open that particular url/link and then we are clicking on it via code. So overall it behaves like a proper a tag with a link assigned to it that has an download attribute and on click of the a tag the it hits the link of the file so it got downloaded automatically because we are saying in attributes that the content of that link are download able.
I hope it will make your understanding clear. But still if you have any question please let me know.
Happy Coding
thank u, tutorial is very good !
Glad it was helpful!
What if I deploy my website, in that case in URL you cannot have localhost:3000 so what should be the replacement?
Hi @Haris Gunasekaran,
You can always use the "window.location.origin" that will give you the url where the app is deployed in case of localhost it will give you the localhost link otherwise it will be the url where ever you have deployed. There are other options/props available under the window.location. for further digging into the current deployed url etc.
Please let me know if you need any more help on that. Thanks
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.
Did you find any solution?
you are a blessed to react and ant design world
Always happy to help.
Thank you @hakan ahmet
Thanks alot very helpful
great vid
Glad it helped!
Why react download me blank pdf from laravel local server? Link in laravel to download is correct so problem is in react?
Hi @MISIU
Can you please check in console on react side for any error printed?
thank you man keep going❣
Thank you too!!!
@@CodeWithAamir do you have linkedin or anysocial media where can I text you and thanks !
Hi Aymen,
You can text me via email at aamircodewith@gmail.com
@@CodeWithAamir thank you
Shall I use this approach for downloading big mp4 files?
You can use this approach as long as the file size it not that much big enough that the browser tab memory can not manage it. Till the points its manageable within the browser tab memory you can try this one. But if the file size is too large then you can try other ways by directly downloading on you computer instead of first reading inside the browser memory.
I hope it helps.
Thanks
Very helpful video bro
Glad to hear that
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
Hi @Tariq Shigri,
First of all I believe you have gone through all of my video because in later part I mentioned how to download instead of opening it. So if still issue persists then if the file or API is not sensitive/private you can share the link with me I can try at my end. Or the other way is we can jump over the zoom call to see the issue.
Thanks
@codeWithAamir, Yes I had to go through the end and tried to create a blob but got the error "Argument of type 'Blob' is not assignable to parameter of type 'Blob | MediaSource'" when creating blob. In my scenario, I have base64 string I first write the file in API folder and return the file name and then append the file name to the URL and tried to fetch it as you did.
@Tariq Shigri
Is it possible to share the code snippet via codesandbox or something I can check at my end to resolve the issue, or if it fine to have zoom session at your computer I am available for that too. But code will be better to resolve any time zone or availability issues etc.
Thanks
Hi,@@CodeWithAamir thanks for your response. I managed to eliminate all errors, but when the blob is created it shows 0 bytes, and the file download is corrupted. Can you help me resolve this issue via a skype call or zoom as you like?
Thanks in advance
Hi @Tariq Shigri
Will it be possible to share the code snippet so I can check it offline? Otherwise you can send me email at aamircodewith@gmail.com and we can come up with a time slot where we both are free. Thanks
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.
Hi @Casri Ware
I am not sure how exactly it works as of today. But I know one website www.diawi.com/ that do the similar work, may be you can check that and try at your side if that helps.
Thanks
Thank you so much
You're most welcome
what if I upload it on github pages ? will it work ? , also it will change the host address right ? will it still work ?
Yes @_acky it should work on github pages or any other hosting website, the only change will be localhost url to some other url that you can get via window.location.href etc. and it will work for any site/url.
Please let me know if you need any more help on that.
Thanks
I am going to start a major project@@CodeWithAamir , my content would be in pdf form so that audience can dowload that , can you please briefly explain what sort of changes in code i need to do for deployment.?
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.
Thank you Hakan for the suggestion, to be more clear can you please provide one-two examples how it should behave or look like?
Thanks again
You can email me with screenshots or something if that makes more sense or just reply here with a little more detail.
Thanks 🙏
Also Hakan, I already has a video on fetching paginated data from the server and showing that inside a table explained in following video ruclips.net/video/AXNp_oU1Q80/видео.html see if that video helps.
Thanks
@@CodeWithAamir Thanks your video resolved my issue.
@hakan ahmet Thats really great!
very useful video
Thank you ☺️
Does this work after I deploy my project on netlify ?
Hi Prakash,
You can always use the "window.location.origin" that will give you the url where the app is deployed in case of localhost it will give you the localhost link otherwise it will be the url where ever you have deployed. There are other options/props available under the window.location. for further digging into the current deployed url etc.
Please let me know if you need any more help on that. Thanks
Hi Amir, I was following the RUclips video, but towards the end, the code is not shown completely. Can you share the code you used in the video?
Sure thing @Julio
Just send me an email at aamircodewith@gmail.com I will reply back with the code file we developed in this video. Thanks
@@CodeWithAamir Hi Amir,
I just sent you an email from my yahoo account.
Thank you!
Hi @Julio Munoz
I have replied with code file on you email. Thanks
This video was useful
Thank you!
many many thanks ❤❤❤
So nice of you ❤❤❤
damn this is chaotic isnt there a simpler way xD
Hi andre,
The simple way could be opening the link inside a window and leave it to the browser for rest of the functions.
window.open("www.example.com");
But in that case there are possibilities that browser opens your files for reading inside the browser instead of download. So that is why this download function was written to overcome those type of issues. I hope it makes sense in case you need more insights let me know in comments.
Thanks
Does it work too when converting reactjs to apk with capacitor?
I am not sure about because I have not used that yet. You may give it a try and let us know with your feedback.
Thanks
efficient Code👍👍👍
Thanks ☺️
how can we show progress of download file instead of result ?
Hi @Степан Цуканов,
The download is handled by the browser and it mostly shows the progress as well while its downloading, not sure how we can show the same within react as of today.
Thanks
The pdf is downloaded but it is not opening why
Put it in the public folder rather than src
you are the man! can you provide us with source code?
Thank you @Martin,
Just send me an email at aamircodewith@gmail.com , and I will reply back with the code file we developed in this tutorial. Thanks
How to download dynamic table in CSV format
Hi @Akash Mehta,
One way is you can write a function that converts the table-data/json dataSource into a csv formate and then you can create a blob out of it , and then, trigger the blob download.
But I would recommend to use the npm package for that so its quick and ready to use, you can try " json-to-csv-export" npm package and see does it work for your usecase.
www.npmjs.com/package/json-to-csv-export
Please let me know if you need any more information on that. THANKS.
Does this work with xml files?
Give it a try, it should work or let me know in case of any issues.
can i add pdf drive link to download pdf file?
Yes you should be as long as the link is accessible by the website. Please let me know in case you face and issue. Thanks
How to put data instead of file and just have to print in pdf???
Hi @Anurag Kesarwani.
For that you may need to use some npm packages that converts the data into the pdf and then download it, here is one working example, please see if that is helpful for you.
codesandbox.io/s/react-json-to-pdf-v6zu5
Thanks
How to download blob image from facebook or instagram?
Hi, I have not tested that but as long as the image is accessible the same technique should work here. Please gibe it a try and let me know if you face any issues.
Thanks
File downloaded but it's size is zero, I tried different pdf from another site, but same result.
Hi @Ajith Ramesh CR
Not sure what could be the issue, what is the pdf size you are using for testing? if its a sample file you can share it with me at aamircodewith@gmail.com I can check at my end too and see if there is any issue found .
Thanks
Hi @CodeWithAamir , Thanks for your quick response. I'm using a test file of 9KB sized .pdf file, I've sent my code to your email. If you can check my code it would be appreciable. Thanks in advance.
Hi Ajith,
I will check that code and get back to you.
Thanks
Hi Ajith,I checked the code and the problem is that the given file is blocked by the CORS that is why it is not being downloaded and when you make no-cors on frontend it is even worse because in short you are saying to browser that my js do not want to process the content that is why its 0 bytes when downloaded.
If you can resolve the CORS issue on your server it will work fine .Please let me know if you need any more information on that. Thanks and Regards
@@CodeWithAamir Thanks Aamir. Let me check the issue.
how to video downloade please make video
Thanks for the suggestion for future tutorials as soon as possible.
They will work on web server
Hi @Ravi,
This is the client side code so not sure whether it will work on the server or not, under the hood it might be using html elements but not sure. You may give it a try.
Thanks