angular-dropzone

Angular DropZone (Beta)

An advanced multi purpose file uploader for Angular TBC...
Demo

About The Project

Built With

• Angular

(back to top)

Installation

1. Install the package

   • npm sh 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 to ts file

   // test.component.ts
   uploadApi = new AngularDropzoneAPI('http://sample_url:5000/FileUpload', 'POST');
   

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

(back to top)

Usage

Feature	Type	Default Value	Description
allowedFormats	string[]	[]	Limit the type of input files
chunk upload size	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: QueuedFile) => 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...)

Usage

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
      },
      ...
    ]

    <angular-dropzone validateFunctions="myValidateFunctions"></angular-dropzone>

How to add a custom template

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

(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)