Angular2 file download from post method

Net Core. Wednesday, January 23, Net Core, particularly a controller with three actions: Upload , to receive a file a save it in the folder.

A possible implementation of the controller may be the following: namespace BackEnd. WebRootPath, "uploads" ; if! Combine uploads, file. Combine uploads, file ; if! WebRootPath, "uploads" ; if Directory. GetFileInfo fileName ; result. Add fileInfo. UploadProgress: this. Response: this.

DownloadProgress: this. START: this. ERROR: this. Written by. Adolfo Arnold. NetCore Angular Asp. DevOps Conference. NDC Tech Town. Platinum sponsor of DevOps Conference. Visual Studio Tour We are sponsor of Visual Studio Tour Cloudgen 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. 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:. Navigate to a convenient location on your file system and run the following command.

How can I download. I am new to Angular4 and typescript bltadwin. I have googled for this but could not find the solution.

Here are some similar questions that I found: Uploading file to controller using typescript.