A file is best represented as a Blob in the browser:. The Blob object represents a blob, which is a file-like object of immutable, raw data -- MDN web docs. By specifying the responseType option we can perform a GET request returning a blob representing the downloaded file.
Let's assume we've got a designated DownloadService doing just that:. A component would then be able to call this service, subscribe to the corresponding observable and eventually save the file like this:. Here, we're creating an anchor tag programmatically when the blob arrives. With URL. Finally, we click the link like the user would've done with a regular browser download link.
After the file is downloaded, we'll discard the blob by revoking the object URL we created. This approach is pretty verbose though and might not work smoothly for every browser. Therefore I'd advise you to use the popular library FileSaver.
The saving then becomes a one-liner:. If you don't like adding a dependency for this and would prefer to use the manual approach shown before, you might as well refactor the code for saving the blob into a separate service.
You can also create a custom injection token for URL - also see below how we'll do this for FileSaver. By setting the option observe to events while making an HTTP request, we won't just receive the final response body of the request but also get access to intermediate HTTP events. We also need to explicitly pass the option reportProgress in order to receive HttpProgressEvents. Our HTTP request will eventually look like follows:. Since we don't just want to forward these events to every component, our service has to do some more work.
Otherwise our component would have to deal with HTTP specifics - that's what services are for! Instead let's introduce a data structure representing a download with progress:. A Download can be in one of three states. Either it hasn't started yet, therefore it's pending.
Otherwise it's done or still in progress. We use TypeScript's union types to define the different download states. Additionally, a download has a number indicating the download progress from 1 to Once a download is done, it will contain a Blob as its content - until then this property is not available, therefore null.
Now we want to abstract from specific HTTP events to our newly defined data structure. I have a url for ex: abc. INO file through a button click event in angular 5 or 6. Adding on to Hussains answer but just doing it with Renderer2 since its not advised to use document directly. 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 2 years, 7 months ago. Active 7 days ago. Viewed 19k times. Improve this question. Vadim Kotov 7, 8 8 gold badges 45 45 silver badges 60 60 bronze badges. Connect and share knowledge within a single location that is structured and easy to search. On considering the future issue of selecting same file not working, In input tag click event we are setting to null, which allows same file to select second time.
You can write something like this if you want to gracefully display the name of the uploaded file. 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. Ask Question. Asked 5 years, 6 months ago. Active 7 months ago. Viewed 79k times.
0コメント