Angular DropZone
An advanced multi purpose file uploader for Angular
Demo
Avatar Mode
<dropzone-avatar [uploadAPI]="uploadApi" [avatar]="roundAvatarCropper"></dropzone-avatar>
![image](https://user-images.githubusercontent.com/102886270/163710741-dd987c1a-cd57-43e7-b497-0da88b4e77c8.png)
![Avatar](https://user-images.githubusercontent.com/102886270/163710876-61a07b3b-ced9-476b-a060-96e5c04b21b4.gif)
Advanced Mode
<dropzone-advanced [uploadAPI]="uploadApi"></dropzone-advanced>
Built With
(back to top)
Installation
-
Install the package
or
-
import Module
import { AngularDropzoneModule } from 'angular-dropzone';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
AngularDropzoneModule <----
],
providers: [],
bootstrap: [AppComponent]
})
-
add your api
uploadApi = new AngularDropzoneAPI('http://sample_url:5000/FileUpload', 'POST');
roundAvatarCropper = {
width: 200,
height: 200,
round: true,
srcImage: '',
};
// 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!
- Fork the Project
- Create your Feature Branch (
git checkout -b feature/AmazingFeature
) - Commit your Changes (
git commit -m 'Add some AmazingFeature'
) - Push to the Branch (
git push origin feature/AmazingFeature
) - Open a Pull Request
(back to top)
License
Distributed under the MIT License. See LICENSE.txt
for more information.
(back to top)