Trigger browser download with reactjs

Thanks to Thomas Konrad for pointing this out! As an addition to above solution, I implemented a way to request multiple files from the remote server, which are zipped up on the fly before delivered to the user.

This is a proof of concept implementation. We have jquery. All this leads to situation when model receives unformatted values from user input and misses formatted ones from plugin. It seems that React has plenty of event handling strategies depending on browser.

Is there any common way to trigger change event for particular DOM element so that React will hear it? I know this answer comes a little late but I recently faced a similar problem.

I wanted to trigger an event on a nested component. This triggered the click event on the domNode and my handler attached via react was indeed called so it behaves like I would expect if someone clicked on the element. I have not tested onChange but it should work, and not sure how this will fair in really old versions of IE but I believe the MouseEvent is supported in at least IE9 and up. In order to get by this, I needed to fetch the file from the URL getting around any CORS policies to save a local Blob that would then be the source of the downloaded file.

Update As of January 31st, , the cors-anywhere demo hosted on Heroku servers will only allow limited use for testing purposes and cannot be used for production applications. You will have to host your own cors-anywhere server by following cors-anywhere or cors-server. You can use FileSaver. I have the exact same problem, and here is the solution I make use of now: Note, this seems ideal to me because it keeps the files closely tied to the SinglePageApplication React app, that loads from Amazon S3.

So, it's like storing on S3, and in an application, that knows where it is in S3, relatively speaking. For downloading you can use multiple ways as been explained above, moreover I will also provide my strategy for this scenario.

How are we doing? Please help us improve Stack Overflow. Take our short survey. 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 3 years, 5 months ago. Active 15 days ago. Viewed k times. 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. I dont know if this is a good idea to do it this way I did. I managed to download the file generated by the rest API URL much easier with this kind of code which worked just fine on my local:.

I needed to just download a file onClick but I needed to run some logic to either fetch or compute the actual url where the file existed. I also did not want to use any anti-react imperative patterns like setting a ref and manually clicking it when I had the resource url. The declarative pattern I used was. How are we doing? Please help us improve Stack Overflow. Take our short survey. 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. How to download fetch response in react as file Ask Question. Asked 5 years, 9 months ago.

Active 3 months ago. Viewed k times. Here is the code in actions. What should I do in the reducer? Rafael K. Add a comment.