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

Подписаться 6 тыс.

Просмотров 59 тыс.

50% 1

#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

Опубликовано:

3 янв 2023

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 107

@ivan4486 5 месяцев назад

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.

@ytpeerz 2 месяца назад

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.

@TwistIO 6 месяцев назад

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.

@arnaudpoutieu1331 Год назад

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)

@CodeWithAamir Год назад

Glad to hear 🎉 Thank you @Arnaud POUTIEU

@CodeWithAamir Год назад

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

@arnaudpoutieu1331 Год назад

@@CodeWithAamir Sure Aamir. I will email you today with a prototype. Many gratitudes!!!

@CodeWithAamir Год назад

Thank you @Arnaud POUTIEU Really appreciated.

@CodeWithAamir Год назад

Hi @Arnaud POUTIEU Here you go with the Dashboard tutorial using React and Ant Design. Pleas let me know with you feedback on that. ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-xvBUgdKUz5g.html Thanks

@LuisHenrique-df8uw Год назад

Awesome! Thanks a lot man!! 🚀🚀

@CodeWithAamir Год назад

So nice of you !

@s.m.mahmudurrahman3166 Год назад

Very very effective tutorial👍👍👍

@CodeWithAamir Год назад

Thank you! Cheers!

@NeerajKumar-wk4qq 6 месяцев назад

very helpful tutorial, Thank you sir.

@CodeWithAamir 5 месяцев назад

Glad it was helpful!

@RajeevSharma-pe1um 5 месяцев назад

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

@khailapuspamaharani 4 месяца назад

thank u, tutorial is very good !

@CodeWithAamir Месяц назад

Glad it was helpful!

@Syedzain_saz 2 месяца назад

Thanks alot very helpful great vid

@CodeWithAamir Месяц назад

Glad it helped!

@hakan126 Год назад

you are a blessed to react and ant design world

@CodeWithAamir Год назад

Always happy to help. Thank you @hakan ahmet

@user-dw9wg7ip3u Год назад

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

@CodeWithAamir Год назад

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

@ashishgupta1156 5 месяцев назад

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.

@omen9649 4 месяца назад

Did you find any solution?

@harisgunasekaran4874 Год назад

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

@CodeWithAamir Год назад

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

@ganesans4957 11 месяцев назад

Shall I use this approach for downloading big mp4 files?

@CodeWithAamir 11 месяцев назад

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

@aymenbouzaien790 Год назад

thank you man keep going❣

@CodeWithAamir Год назад

Thank you too!!!

@aymenbouzaien790 Год назад

@@CodeWithAamir do you have linkedin or anysocial media where can I text you and thanks !

@CodeWithAamir Год назад

Hi Aymen, You can text me via email at aamircodewith@gmail.com

@aymenbouzaien790 Год назад

@@CodeWithAamir thank you

@user-nj6fr9tp3j 5 месяцев назад

Very helpful video bro

@CodeWithAamir Месяц назад

Glad to hear that

@deadmaxmax8632 Год назад

Thank you so much

@CodeWithAamir Год назад

You're most welcome

@user-pf2kd2ck7f Год назад

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.

@CodeWithAamir Год назад

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

@misiu475 Год назад

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

@CodeWithAamir Год назад

Hi @MISIU Can you please check in console on react side for any error printed?

@jubayerkhan4172 Год назад

many many thanks ❤❤❤

@CodeWithAamir Год назад

So nice of you ❤❤❤

@the_og_canvas_art Год назад

very useful video

@CodeWithAamir Год назад

Thank you ☺️

@feyisayoamujoyegbe4238 9 месяцев назад

This video was useful

@CodeWithAamir 8 месяцев назад

Thank you!

@prakash_singh15 Год назад

Does this work after I deploy my project on netlify ?

@CodeWithAamir Год назад

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

@_acky Год назад

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

@CodeWithAamir Год назад

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

@saurabhdwivedi2831 10 месяцев назад

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.?

@hakan126 Год назад

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.

@CodeWithAamir Год назад

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

@CodeWithAamir Год назад

You can email me with screenshots or something if that makes more sense or just reply here with a little more detail. Thanks 🙏

@CodeWithAamir Год назад

Also Hakan, I already has a video on fetching paginated data from the server and showing that inside a table explained in following video ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-AXNp_oU1Q80.html see if that video helps. Thanks

@hakan126 Год назад

@@CodeWithAamir Thanks your video resolved my issue.

@CodeWithAamir Год назад

@hakan ahmet Thats really great!

@EvorsorGaming 9 месяцев назад

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

@CodeWithAamir 9 месяцев назад

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

@blal602 Год назад

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

@CodeWithAamir Год назад

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

@blal602 Год назад

@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.

@CodeWithAamir Год назад

@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

@blal602 Год назад

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

@CodeWithAamir Год назад

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

@TheJulio0928 Год назад

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

@CodeWithAamir Год назад

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

@TheJulio0928 Год назад

@@CodeWithAamir Hi Amir, I just sent you an email from my yahoo account. Thank you!

@CodeWithAamir Год назад

Hi @Julio Munoz I have replied with code file on you email. Thanks

@user-vz4oi6fh7o 5 месяцев назад

efficient Code👍👍👍

@CodeWithAamir Месяц назад

Thanks ☺️

@4Qv27h Год назад

you are the man! can you provide us with source code?

@CodeWithAamir Год назад

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

@andreschou9560 Год назад

damn this is chaotic isnt there a simpler way xD

@CodeWithAamir Год назад

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

@user-vw2hl2rr2l Год назад

how can we show progress of download file instead of result ?

@CodeWithAamir Год назад

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

@ntountou74 Год назад

Does this work with xml files?

@CodeWithAamir Год назад

Give it a try, it should work or let me know in case of any issues.

@AkankitsDreams Год назад

How to download dynamic table in CSV format

@CodeWithAamir Год назад

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.

@kashimjakati1227 5 месяцев назад

The pdf is downloaded but it is not opening why

@MRPIANO-my1kt 3 месяца назад

Put it in the public folder rather than src

@jhimi7975 Год назад

can i add pdf drive link to download pdf file?

@CodeWithAamir Год назад

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

@Abcdsks Год назад

How to put data instead of file and just have to print in pdf???

@CodeWithAamir Год назад

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

@kavithakannan7215 Год назад

How to download blob image from facebook or instagram?

@CodeWithAamir Год назад

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

@ajithrameshcr Год назад

File downloaded but it's size is zero, I tried different pdf from another site, but same result.

@CodeWithAamir Год назад

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

@ajithrameshcr Год назад

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.

@CodeWithAamir Год назад

Hi Ajith, I will check that code and get back to you. Thanks

@CodeWithAamir Год назад

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

@ajithrameshcr Год назад

@@CodeWithAamir Thanks Aamir. Let me check the issue.

@mrravipandee Год назад

They will work on web server

@CodeWithAamir Год назад

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