Download zip file angular

HTML will be as follow:. The component logic will limit itself to recover the list of available files and to show the upload and download status, based on events received from sons components:. See author's posts. Stay updated. How to upload and download files with an Angular front-end and an Asp. Net Core back-end. Uploading and Downloading files with Angular and Asp. 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. 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.

You may also specify any value from supporting values, such as, json, blob, arraybuffer, text. You can have a look for more details on response type. I have used three ways for downloading file — two ways for Save as functionality and one way to show the file content on browser itself. The above line create a Blob object with file content in response and expecting the file of JSON type.

The above two lines create a URL that will open the file in browser in new window. The above line shows the file content on browser, so it does not give you save as option. 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. Collectives on Stack Overflow. Learn more. Download zip file using Angular Ask Question.

Asked 4 years, 6 months ago. Active 2 years, 3 months ago. Viewed 32k times. Improve this question. Add a comment. Active Oldest Votes. Improve this answer.