huply 0.0.3 → 0.0.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +35 -17
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -24,9 +24,21 @@ Recommended step for projects with integrated module bundler (e.g. Webpack) or t
|
|
|
24
24
|
1. Add ``lang`` - Attribute to html-Tag. Otherwise english or the defined fallback language is used as default language.
|
|
25
25
|
``<html lang="en">``
|
|
26
26
|
|
|
27
|
-
2.
|
|
27
|
+
2. Add input field
|
|
28
|
+
|
|
29
|
+
````
|
|
30
|
+
<input
|
|
31
|
+
accept=".jpeg,.jpg,.png"
|
|
32
|
+
multiple
|
|
33
|
+
class="huply-test"
|
|
34
|
+
/>
|
|
28
35
|
````
|
|
29
|
-
|
|
36
|
+
|
|
37
|
+
3. Execute init-function:
|
|
38
|
+
|
|
39
|
+
````
|
|
40
|
+
const el = document.querySelector('.huply-test');
|
|
41
|
+
new Huply(el).init();
|
|
30
42
|
````
|
|
31
43
|
|
|
32
44
|
## Configuration
|
|
@@ -73,7 +85,7 @@ Every Huply-Instance can be modified by parameters:
|
|
|
73
85
|
allowedFileTypes: ['.jpeg', '.png', '.jpg'],
|
|
74
86
|
chunkSize: 5
|
|
75
87
|
};
|
|
76
|
-
new Huply(options).init();
|
|
88
|
+
new Huply(el, options).init();
|
|
77
89
|
```
|
|
78
90
|
|
|
79
91
|
#### dropzoneTheme
|
|
@@ -86,7 +98,7 @@ const options = {
|
|
|
86
98
|
dropzoneTheme: 'sm',
|
|
87
99
|
...
|
|
88
100
|
};
|
|
89
|
-
new Huply(options).init();
|
|
101
|
+
new Huply(el, options).init();
|
|
90
102
|
```
|
|
91
103
|
|
|
92
104
|
#### maxConcurrentUploads
|
|
@@ -99,7 +111,7 @@ const options = {
|
|
|
99
111
|
maxConcurrentUploads: 3,
|
|
100
112
|
...
|
|
101
113
|
};
|
|
102
|
-
new Huply(options).init();
|
|
114
|
+
new Huply(el, options).init();
|
|
103
115
|
```
|
|
104
116
|
|
|
105
117
|
#### maxFileSize
|
|
@@ -112,7 +124,7 @@ const options = {
|
|
|
112
124
|
maxFileSize: 3,
|
|
113
125
|
...
|
|
114
126
|
};
|
|
115
|
-
new Huply(options).init();
|
|
127
|
+
new Huply(el, options).init();
|
|
116
128
|
```
|
|
117
129
|
|
|
118
130
|
#### uploadUrl
|
|
@@ -125,7 +137,7 @@ const options = {
|
|
|
125
137
|
uploadUrl: 'https://my-backend.url/upload',
|
|
126
138
|
...
|
|
127
139
|
};
|
|
128
|
-
new Huply(options).init();
|
|
140
|
+
new Huply(el, options).init();
|
|
129
141
|
```
|
|
130
142
|
|
|
131
143
|
#### deleteUrl
|
|
@@ -138,7 +150,7 @@ const options = {
|
|
|
138
150
|
deleteUrl: 'https://my-backend.url/upload/{{filename}},
|
|
139
151
|
...
|
|
140
152
|
};
|
|
141
|
-
new Huply(options).init();
|
|
153
|
+
new Huply(el, options).init();
|
|
142
154
|
```
|
|
143
155
|
|
|
144
156
|
#### headers
|
|
@@ -153,7 +165,7 @@ const options = {
|
|
|
153
165
|
},
|
|
154
166
|
...
|
|
155
167
|
};
|
|
156
|
-
new Huply(options).init();
|
|
168
|
+
new Huply(el, options).init();
|
|
157
169
|
```
|
|
158
170
|
|
|
159
171
|
#### preloadedFiles
|
|
@@ -177,7 +189,7 @@ const options = {
|
|
|
177
189
|
],
|
|
178
190
|
...
|
|
179
191
|
};
|
|
180
|
-
new Huply(options).init();
|
|
192
|
+
new Huply(el, options).init();
|
|
181
193
|
```
|
|
182
194
|
|
|
183
195
|
#### allowedFileTypes
|
|
@@ -188,7 +200,7 @@ const options = {
|
|
|
188
200
|
allowedFileTypes: ['.jpg', '.jpeg', '.png'],
|
|
189
201
|
...
|
|
190
202
|
};
|
|
191
|
-
new Huply(options).init();
|
|
203
|
+
new Huply(el, options).init();
|
|
192
204
|
```
|
|
193
205
|
|
|
194
206
|
#### chunkSize
|
|
@@ -202,7 +214,7 @@ const options = {
|
|
|
202
214
|
chunkSize: 3,
|
|
203
215
|
...
|
|
204
216
|
};
|
|
205
|
-
new Huply(options).init();
|
|
217
|
+
new Huply(el, options).init();
|
|
206
218
|
```
|
|
207
219
|
|
|
208
220
|
### Data-attributes
|
|
@@ -227,6 +239,12 @@ It is also possible to add parameters as data-attributes:
|
|
|
227
239
|
/>
|
|
228
240
|
```
|
|
229
241
|
|
|
242
|
+
and initialize it:
|
|
243
|
+
|
|
244
|
+
```
|
|
245
|
+
new Huply(el).init();
|
|
246
|
+
```
|
|
247
|
+
|
|
230
248
|
## Translation
|
|
231
249
|
|
|
232
250
|
You can choose between english (en) and german (de) as default translations. Add a lang-attribute to HTML-Tag: ``<html lang="en">``.
|
|
@@ -258,7 +276,7 @@ If you need additional functionality, you can subscribe to events published by h
|
|
|
258
276
|
A file was added.
|
|
259
277
|
|
|
260
278
|
```
|
|
261
|
-
const huply = new Huply().init();
|
|
279
|
+
const huply = new Huply(el).init();
|
|
262
280
|
huply.on('fileAdded', function(fileItem) {
|
|
263
281
|
|
|
264
282
|
});
|
|
@@ -269,7 +287,7 @@ huply.on('fileAdded', function(fileItem) {
|
|
|
269
287
|
A file was uploaded.
|
|
270
288
|
|
|
271
289
|
```
|
|
272
|
-
const huply = new Huply().init();
|
|
290
|
+
const huply = new Huply(el).init();
|
|
273
291
|
huply.on('fileUploaded', function(fileItem) {
|
|
274
292
|
|
|
275
293
|
});
|
|
@@ -280,7 +298,7 @@ huply.on('fileUploaded', function(fileItem) {
|
|
|
280
298
|
All files were uploaded.
|
|
281
299
|
|
|
282
300
|
```
|
|
283
|
-
const huply = new Huply().init();
|
|
301
|
+
const huply = new Huply(el).init();
|
|
284
302
|
huply.on('filesUploaded', function() {
|
|
285
303
|
|
|
286
304
|
});
|
|
@@ -291,7 +309,7 @@ huply.on('filesUploaded', function() {
|
|
|
291
309
|
A file was deleted.
|
|
292
310
|
|
|
293
311
|
```
|
|
294
|
-
const huply = new Huply().init();
|
|
312
|
+
const huply = new Huply(el).init();
|
|
295
313
|
huply.on('fileDeleted', function(fileItem) {
|
|
296
314
|
|
|
297
315
|
});
|
|
@@ -302,7 +320,7 @@ huply.on('fileDeleted', function(fileItem) {
|
|
|
302
320
|
Status of added file changed.
|
|
303
321
|
|
|
304
322
|
```
|
|
305
|
-
const huply = new Huply().init();
|
|
323
|
+
const huply = new Huply(el).init();
|
|
306
324
|
huply.on('fileDeleted', function(fileItem) {
|
|
307
325
|
|
|
308
326
|
});
|