4 |
5 | This is an Angular wrapper library for the [Dropzone](http://www.dropzonejs.com/). To use this library you should get familiar with the Dropzone documentation as well since this documentation only explains details specific to this wrapper.
6 |
7 | This documentation is for the latest 6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from here.
8 |
9 | ### EOL notice
10 |
11 | Version 17.0.0 will most likely be the last release of this library. I recommend you to switch to something more maintained due to official dropzone package being unmaintained.
12 |
13 | ### Quick links
14 |
15 | [Example application](https://zefoy.github.io/ngx-dropzone-wrapper/)
16 | |
17 | [StackBlitz example](https://stackblitz.com/github/zefoy/ngx-dropzone-wrapper/tree/master)
18 | |
19 | [Dropzone documentation](http://www.dropzonejs.com/#configuration-options)
20 |
21 | ### Building the library
22 |
23 | ```bash
24 | npm install
25 | npm run build
26 | ```
27 |
28 | ### Running the example
29 |
30 | ```bash
31 | npm install
32 | npm run start
33 | ```
34 |
35 | ### Installing and usage
36 |
37 | ```bash
38 | npm install ngx-dropzone-wrapper --save
39 | ```
40 |
41 | ##### Load the module for your app (with global configuration):
42 |
43 | Providing the global configuration is optional and when used you should only provide the configuration in your root module.
44 |
45 | ```javascript
46 | import { DropzoneModule } from 'ngx-dropzone-wrapper';
47 | import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
48 | import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
49 |
50 | const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
51 | // Change this to your upload POST address:
52 | url: 'https://httpbin.org/post',
53 | maxFilesize: 50,
54 | acceptedFiles: 'image/*'
55 | };
56 |
57 | @NgModule({
58 | ...
59 | imports: [
60 | ...
61 | DropzoneModule
62 | ],
63 | providers: [
64 | {
65 | provide: DROPZONE_CONFIG,
66 | useValue: DEFAULT_DROPZONE_CONFIG
67 | }
68 | ]
69 | })
70 | ```
71 |
72 | ##### Use it in your HTML template (with custom configuration):
73 |
74 | This library provides two ways to create a Dropzone element, component for simple use cases and directive for more custom use cases.
75 |
76 | **COMPONENT USAGE**
77 |
78 | Simply replace the element that would ordinarily be passed to `Dropzone` with the dropzone component.
79 |
80 | **NOTE:** Component provides couple additional features from directive such as the placeholder image. If you don't need them or want to create custom component then you might want to use the directive instead.
81 |
82 | ```html
83 |
4 |
5 | This is an Angular wrapper library for the [Dropzone](http://www.dropzonejs.com/). To use this library you should get familiar with the Dropzone documentation as well since this documentation only explains details specific to this wrapper.
6 |
7 | This documentation is for the latest 6.x.x version which requires Angular 5 or newer. For Angular 4 you need to use the latest 4.x.x version. Documentation for the 4.x.x can be found from here.
8 |
9 | ### Quick links
10 |
11 | [Example application](https://zefoy.github.io/ngx-dropzone-wrapper/)
12 | |
13 | [StackBlitz example](https://stackblitz.com/github/zefoy/ngx-dropzone-wrapper/tree/master)
14 | |
15 | [Dropzone documentation](http://www.dropzonejs.com/#configuration-options)
16 |
17 | ### Building the library
18 |
19 | ```bash
20 | npm install
21 | npm run build
22 | ```
23 |
24 | ### Running the example
25 |
26 | ```bash
27 | npm install
28 | npm run start
29 | ```
30 |
31 | ### Installing and usage
32 |
33 | ```bash
34 | npm install ngx-dropzone-wrapper --save
35 | ```
36 |
37 | ##### Load the module for your app (with global configuration):
38 |
39 | Providing the global configuration is optional and when used you should only provide the configuration in your root module.
40 |
41 | ```javascript
42 | import { DropzoneModule } from 'ngx-dropzone-wrapper';
43 | import { DROPZONE_CONFIG } from 'ngx-dropzone-wrapper';
44 | import { DropzoneConfigInterface } from 'ngx-dropzone-wrapper';
45 |
46 | const DEFAULT_DROPZONE_CONFIG: DropzoneConfigInterface = {
47 | // Change this to your upload POST address:
48 | url: 'https://httpbin.org/post',
49 | maxFilesize: 50,
50 | acceptedFiles: 'image/*'
51 | };
52 |
53 | @NgModule({
54 | ...
55 | imports: [
56 | ...
57 | DropzoneModule
58 | ],
59 | providers: [
60 | {
61 | provide: DROPZONE_CONFIG,
62 | useValue: DEFAULT_DROPZONE_CONFIG
63 | }
64 | ]
65 | })
66 | ```
67 |
68 | ##### Use it in your HTML template (with custom configuration):
69 |
70 | This library provides two ways to create a Dropzone element, component for simple use cases and directive for more custom use cases.
71 |
72 | **COMPONENT USAGE**
73 |
74 | Simply replace the element that would ordinarily be passed to `Dropzone` with the dropzone component.
75 |
76 | **NOTE:** Component provides couple additional features from directive such as the placeholder image. If you don't need them or want to create custom component then you might want to use the directive instead.
77 |
78 | ```html
79 |