React .ajax post to download file

Update the index. To import a class you must first have to export it as we did for DownloadFile in the last line. When you click any one of the download options — link or button, then you will see below output on the browser.

You can choose any location to save your file. You may also like to read How to download file from server using Angular. Hello I have implemented an express. I have used your solution to download files and have made a request to that express server but the results are empty files.

NOTE: my files are of types. Under src folder, we create http-common. It helps to build an object which corresponds to HTML form using append method. This progress event are expensive change detection for each event , so you should only use when you want to monitor it. We use selectedFiles for accessing current File as the first Item.

Then we call UploadService. So create following upload method:. The progress will be calculated basing on event. If the transmission is done, we call UploadService. Now we implement the render function of the Upload File UI. Connect and share knowledge within a single location that is structured and easy to search.

I created a MaterialUI button and on its onclick callback i call an action of the container component connected. The problem is that the response arrives correctly to the client but then nothing happens: I am expecting that the browser shows the download dialog example: in chrome I expect the bottom bar of downloads to appear with my file.

AS per Nate's answer here , the response of Ajax request is not recognised by a browser as a file. It will behave in the same way for all Ajax responses. You need to trigger the download popup manually. In my implementation, I used filesaverjs to trigger the download popup, once I have received the API response in reducer. Since FileSaver uses blob for saving the file, I am sending the response from server as a blob, converting it into string array buffer and then using it to save my file.

This approach was described in. Please find the sample code below for the reducer : using reducer for state modification, as per Redux reducer.

Flexbox is cheating! Liked this post? Glad to hear that! Required Invalid Email Address. Security code:. Required Invalid security code. I declare, I accept the site's Privacy Policy. Add Comment. Disclaimer : The code samples and API available at www.