Angular download dynamic file

Make sure you give the project name as angular-file-download. For Angular 11 , you will find another option to set whether you want to use stricter type or not.

Here I am using stricter type and later I will show you how to use stricter type for response and error. 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.

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. 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.

Could it depend on your browser settings? 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 what if you could invest in your favorite developer? Who owns this outage? Building intelligent escalation chains for modern SRE. Featured on Meta.

Now live: A fully responsive profile. Reducing the weight of our footer. Since the DownloadComponent exists separately, we will have to pass the data somehow. It provides us with a possibility to pass any data from the parent to the child component — in this case, from AppComponent to DownloadComponent.

The URL of the file will be passed to the back-end as a query parameter. Then, respectfully, the download. And finally, pass the desired URL from the app. When we pass the URL parameter, we combine it with the directory in which our pictures are saved and read the file from that specific location.

Later on, we copy the content of the file to a stream and return it to the client as a File. And yes, we have to handle the data returned from the API. We are going to do it in a way that downloads the photo automatically. The reason why we are manipulating the DOM in this manner is that we want to save the user from doing any more work by downloading the file automatically. To achieve that, first, we create an anchor element. File download is a very common requirement nowadays since we are manipulating hundreds of data every day.

As an extension to the first article about the file upload , this way we can conclude this topic and be sure we can successfully cover any obstacle that comes our way regarding file manipulation in the browser. The process includes a few simple steps which we learned in this article:.

Find out how! Download Files with ASP. To download a starter project for this article, feel free to visit the repository from the previous article and download the finished project. NET Core and Angular repository. Previous Code Maze Weekly Notify of.

Oldest Newest Most Voted. Inline Feedbacks.