Security News
ESLint is Now Language-Agnostic: Linting JSON, Markdown, and Beyond
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
angular-dropzone
Advanced tools
<dropzone-avatar [uploadAPI]="uploadApi" [avatar]="roundAvatarCropper"></dropzone-avatar>
<dropzone-advanced [uploadAPI]="uploadApi"></dropzone-advanced>
Install the package
npm install angular-dropzone
or
yarn add angular-dropzone
import Module
import { AngularDropzoneModule } from 'angular-dropzone';
@NgModule({
declarations: [
AppComponent
],
imports: [
...
AngularDropzoneModule <----
],
providers: [],
bootstrap: [AppComponent]
})
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>
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 |
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 |
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>
<dropzone-advanced [uploadAPI]="uploadApi">
<div style="color: darkgoldenrod; font-size: 12px">Max file size is 10 MB</div>
</dropzone-advanced>
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!
git checkout -b feature/AmazingFeature
)git commit -m 'Add some AmazingFeature'
)git push origin feature/AmazingFeature
)Distributed under the MIT License. See LICENSE.txt
for more information.
FAQs
An advanced file uploader for Angular
The npm package angular-dropzone receives a total of 74 weekly downloads. As such, angular-dropzone popularity was classified as not popular.
We found that angular-dropzone demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
ESLint has added JSON and Markdown linting support with new officially-supported plugins, expanding its versatility beyond JavaScript.
Security News
Members Hub is conducting large-scale campaigns to artificially boost Discord server metrics, undermining community trust and platform integrity.
Security News
NIST has failed to meet its self-imposed deadline of clearing the NVD's backlog by the end of the fiscal year. Meanwhile, CVE's awaiting analysis have increased by 33% since June.