Showing posts with label ng2-file-upload. Show all posts
Showing posts with label ng2-file-upload. Show all posts


December 18, 2017
Easy to use Angular2 components for files upload

Quick start

  1. A recommended way to install ng2-file-upload is through npm package manager using the following command:
npm i ng2-file-upload --save
Alternatively, you can download it in a ZIP file.
  1. 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.
  2. More information regarding using of ng2-file-upload is located in demo and demo sources.

Using ng2-file-upload in a project

  1. Install as shown in the above section.
  2. Import FileUploadModule into the module that declares the component using ng2-file-upload:
import { FileUploadModule } from 'ng2-file-upload';
  1. Add it to [imports] under @NgModule:
imports: [ ... FileUploadModule, ... ]
  1. Import FileUploader into the component:
import { FileUploader } from 'ng2-file-upload';
  1. Create a variable for the API url:
const URL = 'path_to_api';
  1. Initialize it:
public uploader:FileUploader = new FileUploader({url: URL});

API for ng2FileSelect


  • uploader - (FileUploader) - uploader object. See using in demo


  • onFileSelected - fires when files are selected and added to the uploader queue

API for ng2FileDrop


  • uploader - (FileUploader) - uploader object. See using in demo  
Parameters supported by this object:
  1. url - URL of File Uploader's route
  2. authToken - Auth token that will be applied as 'Authorization' header during file send.
  3. 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.
  4. itemAlias - item alias (form name redefenition)
  5. formatDataFunction - Function to modify the request body. 'DisableMultipart' must be 'true' for this function to be called.
  6. formatDataFunctionIsAsync - Informs if the function sent in 'formatDataFunction' is asynchronous. Defaults to false.
  7. 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 demo
  • onFileDrop - 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)"

Note: Special thanks to Valor Software
Disclaimer: The blog is created to share angular directives information to geek, curious Angular Developers.