Download large files blob angular 4

Angular Download Large blobs Ask Question. Asked 3 years, 1 month ago. Active 1 year, 5 months ago. Viewed 1k times. Subscribing to the GET itself is causing the delay of saving the large files. I'm using Angular 6 with an object store backend. Improve this question. Gian T. What is the error message? There's no error. It's just that the files get saved to browser memory first before the download itself starts.

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. This way our components can be decoupled from the underlying network protocol.

Since we're dealing with multiple events coming in over time, a RxJS operator is well suited here - so let's create one! The first step for this will be the creation of type guards helping us to distinguish different HTTP events.

This way we can access event-specific fields in a type-safe way. They both contain the discriminator field type allowing us to easily return a boolean for the type assertion in our guards. The guards can be used with a simple if-statement, however, TypeScript will narrow the event type inside the statement block for us:.

Based on these guards we can now create our custom operator. It'll leverage scan , an operator that allows us to accumulate state for successive values coming through an observable. It takes up to two arguments: First, we provide an accumulator function which will compute the next Download state from the previous one and the current HttpEvent.

Second, we'll pass a seed to scan representing the initial Download state. In the service class I have used Http module which may not be found automatically. So I need to register it in providers array of NgModule. Run the Angular application angular-file-download by executing command ng serve --open.

When you click on link or button for downloading file you will see below page with file save option:. When you use the code for displaying data on browser inside download function of controller code and click on button or link, then you should see below output:. For server side code you can read the post on Download file using Angular and Spring Boot.

Hi, There is no such step other than running the command for installing file-saver package. You can check what goes wrong in the browser conaole. If only more tutorials on Angular were as succinctly and thoughtfully written as this. Well done!! I need to show save dialog box to user so he can save file any where. Hi, thank you for your helpful post. You are commenting using your Google account. You are commenting using your Twitter account. You are commenting using your Facebook account.

Notify me of new comments via email. Notify me of new posts via email. Skip to content Open Menu Home About. Search for: Close. Recently I got a requirement to download base64 string as.