Reactjs file download

Collectives on Stack Overflow. Learn more. Asked 3 years, 5 months ago. Active 16 days ago. Viewed k times. Improve this question.

Sameer Thite Sameer Thite 1, 2 2 gold badges 6 6 silver badges 11 11 bronze badges. Triggering browser download from front-end is not a reliable way to do it. You should create endpoint that when called, will provide the correct response headers, thus triggering the browser download. From my understanding, you are saying that it can be achieved by rest api with correct response headers, is it right? I didn't know how to attach a link in comment, so I posted an answer.

Add a comment. Active Oldest Votes. Improve this answer. Anchor tag opens image in same browser tab preview of image and then we need to manually save the image. I am trying to achieve automatic download on button click, without opening file preview — Sameer Thite. Refer to this for more details: stackoverflow.

I try for zip file, the file downloads, and never unzips properly. Someone might know the reason for it? Btw, I find a workaround: stackoverflow. Triggering browser download from front-end is not reliable. Jackyef Jackyef 3, 15 15 silver badges 22 22 bronze badges. What you should do is, create an endpoint that when called, will provide the correct response headers, thus triggering the browser download You can use FileSaver.

Stack Overflow for Teams — Collaborate and share knowledge with a private group. Create a free Team What is Teams? Collectives on Stack Overflow. Learn more. Asked 2 years, 4 months ago. Active 1 year, 3 months ago. Viewed 13k times. Improve this question. I have the file in my components folder. Nate Nate 7 7 silver badges 6 6 bronze badges. The Sending form data page on MDN might be helpful.

Take a look at the section titled A special case: sending files. We have a use case where we first send an Ajax request to generate a download file, then we download. If you can use that option, you'll have more control over the headers in your Ajax request.

This example is very helpful, but it still isn't clear to me how this implementation knows about whether or not the file has been downloaded.

I see that the "onDownloadComplete" is called synchronously after submit, are you just making the assumption that there aren't any errors and that the server receives the request? Himmel Yes, sadly, this work around does not provide a way to confirm the file download was successful. One possible solution could be to send an Ajax request prior to the download in Widget.

Then, if successful, trigger the download. You still aren't confirming the download is successful, but if the file doesn't exist or there's some kind of network error at that time, you could handle the error. You might also want to look into putting the form in an iframe and read the iframe's content using the onload event. This is causing me to redirect. Anton Philin Anton Philin 3 3 silver badges 2 2 bronze badges. The downloadjs is excellent and perfectly solved the problem.

Stan Stan 1, 11 11 silver badges 12 12 bronze badges. U just saved my 2 days of searcing efforts This is the answer I am looking for — saikumar. This worked for me. Community Bot 1 1 1 silver badge. Raluca Popa Raluca Popa 92 4 4 bronze badges. You can use any server side technology to download file but we will focus on client side technology React JS framework. I will provide link as well as button on which user will click and download file from server.

User will get Save As option when clicks on download link or button. Go through the following steps for creating React project to download file from server using React.

Make sure to give the project name as react-file-download. Wait till the project directory creation is not finished. When done you will get successful message. Note that when we open a file or edit a file in subsequent sections we will by default refer to the project root directory react-file-download and later we may not mention this directory name.

When project directory creation is finished with all of its components then first task is to change the default title of the page.

Create DownloadFile.