Angular DropZone

An advanced multi purpose file uploader for Angular
Demo

Avatar Mode

<dropzone-avatar [uploadAPI]="uploadApi" [avatar]="roundAvatarCropper"></dropzone-avatar>

Advanced Mode

<dropzone-advanced [uploadAPI]="uploadApi"></dropzone-advanced>

Built With

• Angular

(back to top)

Installation

1. Install the package

   • npm

     npm install angular-dropzone

   or

   • yarn

     yarn add angular-dropzone

2. import Module

     import { AngularDropzoneModule } from 'angular-dropzone';
   
   
   
     @NgModule({
       declarations: [
         AppComponent
       ],
       imports: [
         ...
         AngularDropzoneModule   <----
       ],
       providers: [],
       bootstrap: [AppComponent]
     })

3. add your api

   // test.component.ts
   uploadApi = new AngularDropzoneAPI('http://sample_url:5000/FileUpload', 'POST');
   roundAvatarCropper = {
     width: 200,
     height: 200,
     round: true,
     srcImage: '', // currently uploaded Image
   };

   // Avatar Mode
   <dropzone-avatar [uploadAPI]="uploadApi" [avatar]="roundAvatarCropper"></dropzone-avatar>
   // Advanced Mode
   <dropzone-advanced [uploadAPI]="uploadApi"></dropzone-advanced>

(back to top)

Usage

Advanced Mode

Feature	Type	Default Value	Description
[allowedFormats]	string[]	[]	Limit the type of input files
[chunkUploadSize]	number	0 (disabled)	Allow to upload huge files (chunks should be handled by server)
[autoUpload]	boolean	true	Start to upload automatically after adding files
[maxFileLimit]	number	unlimited	Limit the number of files
[multiple]	boolean	true	Add Single or Multiple files
[validateFunctions]	({ fn: (file: DropZoneFile) => boolean, errorMessage: string })[]	empty	Validation functions with custom error message.
[keepInvalidFiles]	boolean	true	Keep invalid files and display an error message
[maxFileSize]	number	4000 MB	Limit the size of the input file
[fileSizeUnit]	"KB" , "MB" , "GB"	"MB"	File size unit
[concurrentUploadLimit]	number	5	Number of files can be uploaded concurrently
[uploadAPI]	AngularDropzoneAPI		API definition (URL,Headers,Method...)
(uploaded)	{ currentFile: DropZoneFile, allFiles: DropZoneFile[] }		Event Emitter of uploaded files to parent

Avatar Mode

Feature	Type	Default Value	Description
[allowedFormats]	string[]	['MIME:Image/*']	Limit the type of input files ( Append 'MIME:' If you are sending a MIME. i.e. ['MIME:Image/*']
[validateFunctions]	({ fn: (file: DropZoneFile) => boolean, errorMessage: string })[]	empty	Validation functions with custom error message.
[maxFileSize]	number	4000 MB	Limit the size of the input file
[uploadAPI]	AngularDropzoneAPI		API definition (URL,Headers,Method...)
[avatar]	{ width: number, height: number, round: boolean, srcImage?: any }	{ width: 150, height: 150, round: true }	Avatar size & shape. round=true => Circle mode, round=false => Square mode, srcImage => Currently Uploaded Image
(uploaded)	{ currentFile: DropZoneFile, allFiles: DropZoneFile[] }		Event Emitter of uploaded files to parent

How to add a validation function:

const myValidateFunctions = [
 {
   fn: (item) => item.size < 100000 , // logic should be here
   errorMessage: 'File size is more than expected.' // custom error message
 },
 ...
]

<dropzone-advanced [validateFunctions]="myValidateFunctions"></dropzone-advanced>

How to add a custom message

<dropzone-advanced [uploadAPI]="uploadApi">
  <div style="color: darkgoldenrod; font-size: 12px">Max file size is 10 MB</div>
</dropzone-advanced>

(back to top)

Contributing

Contributions are what make the open source community such an amazing place to learn, inspire, and create. Any contributions you make are greatly appreciated.

If you have a suggestion that would make this better, please fork the repo and create a pull request. You can also simply open an issue with the tag "enhancement". Don't forget to give the project a star! Thanks again!

1. Fork the Project
2. Create your Feature Branch (git checkout -b feature/AmazingFeature)
3. Commit your Changes (git commit -m 'Add some AmazingFeature')
4. Push to the Branch (git push origin feature/AmazingFeature)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE.txt for more information.

(back to top)