Easy to use Angular directives for user file selections (DEMO PAGE)
This package is to handle select/drag/drop of files. Once files are selected, for uploading, you then use native
@angular/common
for uploading selected files (see here for more on uploading).- Examples
- API
Quick Start
Angular (2+) Home (angular.io). Help Request Http get -> browser file download. What I want to do is to auto download the file for the user after they complete.
- A recommended way to install angular-file is through npm package manager using the following command:
npm install angular-file --save-dev
Alternatively, you can download it in a ZIP file.
- Currently
angular-file
contains three directives:ngf
,ngfSelect
, andngfDrop
.ngf
andngfSelect
are quite the same with just different defaults and they both utilize<input type='file' />
functionality.ngfDrop
is used to designate an area that will be used for dropping of file(s). - More information regarding using of angular-file is located indemo and demo sources.
Examples
Practical Example
An example intended to have every line needed to run an app with angular-file. To use this example, replace the contents of main.ts with this code, and add
<app></app>
to the body of index.htmlSelect Files Examples
Examples of how to allow file selection
Multiple
Single
Element
Image Backgrounds Only
Images Only
Drop Files Examples
Examples of how to allow file drag/drop
Basic
Combo Drop Select
API
ngf Directive
A base directive that provides abilities of ngfDrop and ngfSelect. Does not auto default nor auto host element events like hover/drag/drop (see ngfDrop and/or ngfSelect)
ngfDrop Directive
Extends ngf and then auto hosts element event watching of hover/drag/drop
Supporting Internet Explorer 11 or less?
Only (fileOver) works accurately[(validDrag)] & [(invalidDrag)] should NOT be used as IE11 does not indicate the number of files NOR the types of files being dragged like other modern web browsers
ngfSelect Directive
Extends ngf and auto engages click base file selecting
ngfBackground Directive
ngfSrc Directive
ngfUploadStatus Directive
Does calculations of an upload event and provideds percent of upload completed
ngfFormData Directive
Converts files to FormData
Uploading
Angular, natively, makes uploading files so very easy!
Did you know?
- You do NOT and should NOT use a seperate package to upload files other than
@angular/common
- You do not need a package like ng2-file-upload which have outdated non-core-community driven file uploading scripts
- Just can just use
@angular/common
to send files! Why add more unneccessary weight of dependency of another package? - Multi file uploading is so easy with
@angular/common
- You will have the most control seperating your file selecting from file uploading
- You should use this package, angular-file, to select files and then give to Angular to upload
Uploading files is as easy as:
Troubleshooting
Please follow this guidelines when reporting bugs and feature requests:
- Use GitHub Issues board to report bugs and feature requests (not our email address)
- Please always write steps to reproduce the error. That way we can focus on fixing the bug, not scratching our heads trying to reproduce it.
Thanks for understanding!
Credits
- Current Author: Acker Apple
- Forked from outdated package: ng2-file-upload
License
The MIT License (see the LICENSE file for the full text)
I have a WebApi / MVC app for which I am developing an angular2 client (to replace MVC). I am having some troubles understanding how Angular saves a file.
The request is ok (works fine with MVC, and we can log the data received) but I can't figure out how to save the downloaded data (I am mostly following the same logic as in this post). I am sure it is stupidly simple, but so far I am simply not grasping it.
The code of the component function is below. I've tried different alternatives, the blob way should be the way to go as far as I understood, but there is no function
createObjectURL
in URL
. I can't even find the definition of URL
in window, but apparently it exists. If I use the FileSaver.js
module I get the same error. So I guess this is something that changed recently or is not yet implemented. How can I trigger the file save in A2?For the sake of completeness, the service that fetches the data is below, but the only thing it does is to issue the request and pass on the data without mapping if it succeeds:
rllrll
21 Answers
The problem is that the observable runs in another context, so when you try to create the URL var, you have an empty object and not the blob you want.
One of the many ways that exist to solve this is as follows:
When the request is ready it will call the function 'downloadFile' that is defined as follows:
the blob has been created perfectly and so the URL var, if doesn't open the new window please check that you have already imported 'rxjs/Rx' ;
I hope this can help you.
Alejandro CorredorAlejandro Corredor
Try this!
1 - Install dependencies for show save/open file pop-up
2- Create a service with this function to recive the data
3- In the component parse the blob with 'file-saver'
This works for me!
Hector CuevasHector Cuevas
If you don't need to add headers in the request, to download a file in Angular2 you can do a simple:
in your component.
surfealokeseasurfealokesea
This is for folks looking how to do it using HttpClient and file-saver:
- Install file-saver
npm install file-saver --save
npm install @types/file-saver --save
API Service class:
Component:
JustinJustin
How about this?
I could do with it.
no need additional package.
no need additional package.
harufumi.abeharufumi.abe
As mentioned by Alejandro Corredor it is a simple scope error. The
subscribe
is run asynchronously and the open
must be placed in that context, so that the data finished loading when we trigger the download.That said, there are two ways of doing it. As the docs recommend the service takes care of getting and mapping the data:
Then, on the component we just subscribe and deal with the mapped data. There are two possibilities. The first, as suggested in the original post, but needs a small correction as noted by Alejandro:
The second way would be to use FileReader. The logic is the same but we can explicitly wait for FileReader to load the data, avoiding the nesting, and solving the async problem.
Note: I am trying to download an Excel file, and even though the download is triggered (so this answers the question), the file is corrupt. See the answer to this post for avoiding the corrupt file.
rllrll
Download *.zip solution for angular 2.4.x: you must import ResponseContentType from '@angular/http' and change responseType to ResponseContentType.ArrayBuffer (by default it ResponseContentType.Json)
Alex DzeikoAlex Dzeiko
Tobias ErnstTobias Ernst
Downloading file through ajax is always a painful process and In my view it is best to let server and browser do this work of content type negotiation.
I think its best to have
to do it. This doesn't even require any new windows opening and stuff like that.
The MVC controller as in your sample can be like the one below:
Bharat RajBharat Raj
For those using Redux Pattern
I added in the file-saver as @Hector Cuevas named in his answer. Using Angular2 v. 2.3.1, I didn't need to add in the @types/file-saver.
The following example is to download a journal as PDF.
The journal actions
The journal effects
The journal service
The HTTP service
The journal reducerThough this only sets the correct states used in our application I still wanted to add it in to show the complete pattern.
I hope this is helpful.
Casper NybroeCasper Nybroe
I share the solution that helped me (any improvement is greatly appreciated)
On your service 'pservice' :
Component Part :
On the component part, you call the service without subscribing to a response. The subscribe for a complete list of openOffice mime types see : http://www.openoffice.org/framework/documentation/mimetypes/mimetypes.html
Ismail HIsmail H
To download and show PDF files, a very similar code snipped is like below:
BaatarBaatar
I am using Angular 4 with the 4.3 httpClient object. I modified an answer I found in Js' Technical Blog which creates a link object, uses it to do the download, then destroys it. Sm bus controller driver vista 64.
Client:
The value of this.downloadUrl has been set previously to point to the api. I am using this to download attachments, so I know the id, contentType and filename:I am using an MVC api to return the file:
The attachment class looks like this:
The filerep repository returns the file from the database.
Hope this helps someone :)
davausdavaus
It will be better if you try to call the new method inside you
subscribe
Inside
downloadFile(data)
function we need to make block, link, href and file name
Volodymyr KhmilVolodymyr Khmil
Update to Hector's answer using file-saver and HttpClient for step 2:
dmcgrandledmcgrandle
Here's something I did in my case -
The solution is referenced from - here
Tushar WalzadeTushar Walzade
I got a solution for downloading from angular 2 without getting corrupt,using spring mvc and angular 2
1st- my return type is :-ResponseEntity from java end. Here I am sending byte[] array has return type from the controller.
2nd- to include the filesaver in your workspace-in the index page as:
Angular 4 Upload File Example
3rd- at component ts write this code:
This will give you xls file format. If you want other formats change the mediatype and file name with right extension.
user2025069user2025069
I was facing this same case today, I had to download a pdf file as an attachment (the file shouldn't be rendered in the browser, but downloaded instead). To achieve that I discovered I had to get the file in an Angular
Blob
, and, at the same time, add a Content-Disposition
header in the response.This was the simplest I could get (Angular 7):
Inside the service:
Then, when I need to download the file in a component, I can simply:
UPDATE:
Angular 2 File Download Example
Removed unnecessary header setting from service
Gabriel SezefredoGabriel Sezefredo
user2025069user2025069
Harunur RashidHarunur Rashid
<a href='my_url' download='myfilename'>Download file</a>
my_url should have the same origin, otherwise it will redirect to that location
VIVEK SINGHVIVEK SINGH