Avatar Mode

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

Advanced Mode

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

Built With

• Angular

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>

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!

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

License

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