Angular 4 download file without knowing file type

Source: How do I download a file with Angular2. Turns out I was converting base64 to blob in an incorrect way. This base64 to blob helped me. 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. Download File in Angular4 using file-saver Ask Question. Asked 3 years, 9 months ago. Active 2 years, 11 months ago. 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. This seed will represent our download being pending without any progress or content:. Our accumulator will use the previously defined guard to update the Download state over time with information from the HTTP events:.

When we encounter a HttpProgressEvent , we calculate the progress based on the number of bytes already loaded and the total bytes.

A download is done when we receive a HttpResponse containing the file contents in its body. When receiving any other events than HttpProgressEvent or HttpResponse , we won't alter the download's state and return it as it is. This way, for example, we can keep the information in the progress property while other events that won't allow us to compute the progress can be ignored for now. Anything unclear?

Let's finally define our custom operator that's using scan with our accumulator and seed :. Select Blank Page and click Next. For Page Number, enter 2. The best way to handle file upload in Angular is to build one or more custom components, depending on the supported upload scenarios. First, download this repo as zip file and copy it to the backend directory. Remember the file extension ts service. Service is one of fundamental blocks of every Angular application. Service is just a TypeScript class with or even without Injectable decorator.

Once you create the service class you need to register it under app. Injectable is a decorator that has a property providedIn. When the service is provided at root level, Angular creates a single, shared instance of service and injects into any class that needs it.

Registering the provider in the Injectable metadata also allows Angular to optimize an application by removing the service if it is not used. If you are not using stricter type then your code should be working fine as it is working for Angular First replace the line this. I am also accepting response as Blob Binary Large Object. SwissCodeMen 2, 4 4 gold badges 13 13 silver badges 25 25 bronze badges. Alejandro Corredor Alejandro Corredor 2, 1 1 gold badge 8 8 silver badges 6 6 bronze badges.

What is this. Burjua the getReport returns a this. The issue I'm having is that the window opens and closes immediately not downloading the file — Braden Brown. How can we set file name in here? I've used the above code for downloading a file from API response but i'm getting some error in creating the Blob part "Type response is not assignable to type Blobpart".

Kindly help if anyone knows this issue — knbibin. Show 10 more comments. Try this! Hector Cuevas Hector Cuevas 1, 1 1 gold badge 6 6 silver badges 3 3 bronze badges.

I used step 2 in combination with the answer from Alejandro and it worked without the need to install file-saver Thank you! It works perfectly! I wonder if we can get the filename that is defined on the header of the response.

Is that possible? This one however is not suitable for big files download. Can someone please tell why this answer is downvoted? The topic is to download a file using angular2. If this method works to do a simple download then it should also be marked as a valid answer. SaurabhShetty, This won't help in case you want to send custom headers, what if you want to send an auth token for example? If you look into OP question you can see he uses authHttp! I do understand the downvotes, nevertheless this answer solved my issue.

If you let the server return the url in some context, the server could prepare the url. The cover could be a url to an image in the server. When calling get Myrecord you let the server return the prepared url Cover , with security token and other headers set. It is an answer that works. Show 1 more comment. Justin Justin 8 8 silver badges 11 11 bronze badges.

How to show the filesize in the browser when the download starts? I am sending the filesize as content-length in the http header. How about this? So simple yet it is the one that work flawlessly. It doesn't clutter the DOM, doesn't create any element. I combined this solution with some of the aboves and it works like a charm. AbdullahA 33 8 8 bronze badges. Tobias Ernst Tobias Ernst 3, 1 1 gold badge 25 25 silver badges 24 24 bronze badges.

Thanks, works with Angular 8. Don't know why this was so hard to find. I think the reason the file gets corrupted is because you are loading res into the blob and you actually want res. As of today.