I have a React component called FileDownload. All this component does is render a hidden form and then, inside componentDidMount , immediately submit the form and call it's onDownloadComplete prop. Widget has corresponding action and store files. Widget imports FileDownload. Widget has two methods related to the download: handleDownload and handleDownloadComplete.
Widget store has a property called downloadPath. It's set to null by default. When it's value is set to null , there is no file download in progress and the Widget component does not render the FileDownload component. The store saves the downloadPath and emits a change event. Since there is now a downloadPath , Widget will render FileDownload passing in the necessary props including downloadPath as well as the handleDownloadComplete method as the value for onDownloadComplete.
However, this time downloadPath is set to null. The store saves the downloadPath as null and emits a change event. Since there is no longer a downloadPath the FileDownload component is not rendered in Widget and the world is a happy place. Improve this answer. 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?
TypeScript Show sub menu. TypeScript Best Practices. Modern JavaScript. JavaScript Mistakes. JavaScript APIs. Python Show sub menu. Python Answers. Beautiful Soup. Careers Show sub menu. Practice Project Ideas. Reviews Show sub menu. Useful APIs. Books Show sub menu. Book Reviews. Sign Up for My Mailing List. Developer Tools Show sub menu. Code Formatters Show sub menu. JavaScript Code Beautifier. Crypto Show sub menu. AES Encryptor and Decryptor.
MD5 Hash Generator. SHA Hash Generator. SHA Generator. CSV Show sub menu. Content Generators Show sub menu. Canadian Province Array and Select Element. Countries Array and Select Element. Credit Card Number Validator. Deepak Gupta - Dec Mohmed Ishak - Dec Marcus Hellberg - Dec DEV Community is a community of , amazing developers We're a place where coders share, stay up-to-date and grow their careers.
Create account Log in. Twitter Facebook Github Instagram Twitch. I was able to add an epub file in the same way — fatemeh kazemi. You can define a component and use it wherever. Hamid Shoja Hamid Shoja 1, 2 2 gold badges 19 19 silver badges 30 30 bronze badges. Well, chances are if you've got web-pack it's going to try and minify it. So, I suggest to place the asset into the public folder, under a resource or an asset name.
Webpack doesn't touch the public folder and index. The zip file would download, and somehow would unzip properly. Rohan Kumar Rohan Kumar 7 7 silver badges 14 14 bronze badges. This is kind of a cool library. It still opened PDFs in a new tab unfortunately though.
It makes opening the file on the fly a really clean process though. The package that solved my download link issue was: npm install --save react-download-link Use it like this: fileDownload axiosResponse.
GetBytes serializedObj ; return File sitemapString. We can user react-download-link component to download content as File. Asha Gadad Asha Gadad 1. Download file For downloading you can use multiple ways as been explained above, moreover I will also provide my strategy for this scenario. Sign up or log in Sign up using Google. Sign up using Facebook. Sign up using Email and Password. Post as a guest Name. Email Required, but never shown. The Overflow Blog.
Podcast An oral history of Stack Overflow — told by its founding team.
0コメント