Angular-dropzone NPM

Avatar Mode

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

Avatar

Advanced Mode

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

Built With

Angular

Installation

Install the package

npm
```
npm install angular-dropzone
```

yarn
```
yarn add angular-dropzone
```

import Module

  import { AngularDropzoneModule } from 'angular-dropzone';

 @NgModule({
   declarations: [
     AppComponent
   ],
   imports: [
     ...
     AngularDropzoneModule   <----
   ],
   providers: [],
   bootstrap: [AppComponent]
 })

3. add your api
```typescript
// 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>

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>

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!