Easy to use Angular components for files upload
Valor Software
Easy to use Angular2 directives for files upload (demo)
npm i ng2-file-upload
Alternatively, you can download it in a ZIP file.
Currently ng2-file-upload
contains two directives: ng2-file-select
and ng2-file-drop
. ng2-file-select
is used for 'file-input' field of form and
ng2-file-drop
is used for area that will be used for dropping of file or files.
More information regarding using of ng2-file-upload is located in demo and demo sources.
Install as shown in the above section.
Import FileUploadModule
into the module that declares the component using ng2-file-upload:
import { FileUploadModule } from 'ng2-file-upload';
[imports]
under @NgModule
:imports: [ ... FileUploadModule, ... ]
FileUploader
into the component:import { FileUploader } from 'ng2-file-upload';
const URL = 'path_to_api';
public uploader:FileUploader = new FileUploader({url: URL});
ng2FileSelect
uploader
- (FileUploader
) - uploader object. See using in demoonFileSelected
- fires when files are selected and added to the uploader queueng2FileDrop
uploader
- (FileUploader
) - uploader object. See using in demoParameters supported by this object:
url
- URL of File Uploader's routeauthToken
- Auth token that will be applied as 'Authorization' header during file send.disableMultipart
- If 'true', disable using a multipart form for file upload and instead stream the file. Some APIs (e.g. Amazon S3) may expect the file to be streamed rather than sent via a form. Defaults to false.itemAlias
- item alias (form name redefinition)formatDataFunction
- Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.formatDataFunctionIsAsync
- Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.parametersBeforeFiles
- States if additional parameters should be appended before or after the file. Defaults to false.fileOver
- it fires during 'over' and 'out' events for Drop Area; returns boolean
: true
if file is over Drop Area, false
in case of out.
See using in ts demo and
html demoonFileDrop
- it fires after a file has been dropped on a Drop Area; you can pass in $event
to get the list of files that were dropped. i.e. (onFileDrop)="dropped($event)"
Please follow these guidelines when reporting bugs and feature requests:
Thanks for understanding!
The MIT License (see the LICENSE file for the full text)
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.