Angular 2 Dropzone Wrapper
This is an Angular 2 wrapper library for dropzone.
See a live example application here.
Building the library
npm install
npm run build
Running the example
cd example
npm install
npm start
Installing and usage
npm install angular2-dropzone-wrapper --save-dev
Load the module for your app (with global configuration):
import { DropzoneModule } from 'angular2-dropzone-wrapper';
import { DropzoneConfigInterface } from 'angular2-dropzone-wrapper';
const DROPZONE_CONFIG: DropzoneConfigInterface = {
// Change this to your upload POST address:
server: 'https://httpbin.org/post',
maxFilesize: 50,
acceptedFiles: 'image/*'
};
@NgModule({
...
imports: [
...
DropzoneModule.forRoot(DROPZONE_CONFIG)
]
})
Use it in your html template (with custom configuration):
<dropzone [config]="config" [message]="'Click or drag images here to upload'" (uploadError)="onUploadError($event)" (uploadSuccess)="onUploadSuccess($event)"></dropzone>
[config] // Custom config to override the global defaults.
[message] // Message to show for the user on the upload area.
[placeholder] // Placeholder image to be shown as the upload area.
(uploadError) // Event handler for the dropzone upload error event.
(uploadSuccess) // Event handler for the dropzone upload success event.
(uploadCanceled) // Event handler for the dropzone upload canceled event.
Available configuration options (custom / global configuration):
server // Server url for sending the upload request (Default: '').
params // Url parameters to be added to the server url (Default: null).
autoReset // Time for resetting upload area after upload (Default: null).
errorReset // Time for resetting upload area after an error (Default: null).
cancelReset // Time for resetting upload area after canceling (Default: null).
method // HTTP method to use communicating with the server (Default: 'post').
headers // Object of additional headers to send to the server (Default: null).
paramName // Name of the file parameter that gets transferred (Default: 'file').
maxFilesize // Maximum file size for the upload files in megabytes (Default: null).
acceptedFiles // Comma separated list of mime types or file extensions (Default: null).
For more detailed documentation with all the supported options see dropzone documentation.