@vaadin/upload 25.1.0-alpha7 → 25.1.0-alpha9
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/custom-elements.json +117 -1
- package/package.json +11 -11
- package/src/vaadin-upload-drop-zone.js +1 -1
- package/src/vaadin-upload-file-list-mixin.js +1 -0
- package/src/vaadin-upload-manager.d.ts +7 -1
- package/src/vaadin-upload-manager.js +2 -0
- package/src/vaadin-upload-mixin.d.ts +1 -0
- package/src/vaadin-upload-mixin.js +3 -0
- package/web-types.json +145 -154
- package/web-types.lit.json +51 -51
package/custom-elements.json
CHANGED
|
@@ -344,6 +344,28 @@
|
|
|
344
344
|
"description": "If true, the user cannot interact with this element.",
|
|
345
345
|
"attribute": "disabled"
|
|
346
346
|
},
|
|
347
|
+
{
|
|
348
|
+
"kind": "field",
|
|
349
|
+
"name": "i18n",
|
|
350
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
351
|
+
"return": {
|
|
352
|
+
"type": {
|
|
353
|
+
"text": "Object"
|
|
354
|
+
}
|
|
355
|
+
},
|
|
356
|
+
"parameters": [
|
|
357
|
+
{
|
|
358
|
+
"name": "value",
|
|
359
|
+
"type": {
|
|
360
|
+
"text": "Object"
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
],
|
|
364
|
+
"inheritedFrom": {
|
|
365
|
+
"name": "I18nMixin",
|
|
366
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
367
|
+
}
|
|
368
|
+
},
|
|
347
369
|
{
|
|
348
370
|
"kind": "field",
|
|
349
371
|
"name": "items",
|
|
@@ -375,6 +397,13 @@
|
|
|
375
397
|
"description": "If true, the user cannot interact with this element.",
|
|
376
398
|
"fieldName": "disabled"
|
|
377
399
|
},
|
|
400
|
+
{
|
|
401
|
+
"name": "i18n",
|
|
402
|
+
"inheritedFrom": {
|
|
403
|
+
"name": "I18nMixin",
|
|
404
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
405
|
+
}
|
|
406
|
+
},
|
|
378
407
|
{
|
|
379
408
|
"name": "items",
|
|
380
409
|
"type": {
|
|
@@ -440,6 +469,28 @@
|
|
|
440
469
|
"module": "src/vaadin-upload-file-list-mixin.js"
|
|
441
470
|
}
|
|
442
471
|
},
|
|
472
|
+
{
|
|
473
|
+
"kind": "field",
|
|
474
|
+
"name": "i18n",
|
|
475
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
476
|
+
"return": {
|
|
477
|
+
"type": {
|
|
478
|
+
"text": "Object"
|
|
479
|
+
}
|
|
480
|
+
},
|
|
481
|
+
"parameters": [
|
|
482
|
+
{
|
|
483
|
+
"name": "value",
|
|
484
|
+
"type": {
|
|
485
|
+
"text": "Object"
|
|
486
|
+
}
|
|
487
|
+
}
|
|
488
|
+
],
|
|
489
|
+
"inheritedFrom": {
|
|
490
|
+
"name": "I18nMixin",
|
|
491
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
492
|
+
}
|
|
493
|
+
},
|
|
443
494
|
{
|
|
444
495
|
"kind": "field",
|
|
445
496
|
"name": "items",
|
|
@@ -503,6 +554,13 @@
|
|
|
503
554
|
"module": "src/vaadin-upload-file-list-mixin.js"
|
|
504
555
|
}
|
|
505
556
|
},
|
|
557
|
+
{
|
|
558
|
+
"name": "i18n",
|
|
559
|
+
"inheritedFrom": {
|
|
560
|
+
"name": "I18nMixin",
|
|
561
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
562
|
+
}
|
|
563
|
+
},
|
|
506
564
|
{
|
|
507
565
|
"name": "items",
|
|
508
566
|
"type": {
|
|
@@ -1487,7 +1545,7 @@
|
|
|
1487
1545
|
"type": {
|
|
1488
1546
|
"text": "object"
|
|
1489
1547
|
},
|
|
1490
|
-
"default": "{ dropFiles: { one: 'Drop file here', many: 'Drop files here', }, addFiles: { one: 'Upload File...', many: 'Upload Files...', }, error: { tooManyFiles: 'Too Many Files.', fileIsTooBig: 'File is Too Big.', incorrectFileType: 'Incorrect File Type.', }, uploading: { status: { connecting: 'Connecting...', stalled: 'Stalled', processing: 'Processing File...', held: 'Queued', }, remainingTime: { prefix: 'remaining time: ', unknown: 'unknown remaining time', }, error: { serverUnavailable: 'Upload failed, please try again later', unexpectedServerError: 'Upload failed due to server error', forbidden: 'Upload forbidden', }, }, file: { retry: 'Retry', start: 'Start', remove: 'Remove', }, units: { size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], }, }"
|
|
1548
|
+
"default": "{ dropFiles: { one: 'Drop file here', many: 'Drop files here', }, addFiles: { one: 'Upload File...', many: 'Upload Files...', }, error: { tooManyFiles: 'Too Many Files.', fileIsTooBig: 'File is Too Big.', incorrectFileType: 'Incorrect File Type.', }, uploading: { status: { connecting: 'Connecting...', stalled: 'Stalled', processing: 'Processing File...', held: 'Queued', }, remainingTime: { prefix: 'remaining time: ', unknown: 'unknown remaining time', }, error: { serverUnavailable: 'Upload failed, please try again later', unexpectedServerError: 'Upload failed due to server error', forbidden: 'Upload forbidden', fileTooLarge: 'File is too large', }, }, file: { retry: 'Retry', start: 'Start', remove: 'Remove', }, units: { size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'], }, }"
|
|
1491
1549
|
},
|
|
1492
1550
|
{
|
|
1493
1551
|
"kind": "mixin",
|
|
@@ -1551,6 +1609,28 @@
|
|
|
1551
1609
|
"description": "Key-Value map to send to the server. If you set this property as an\nattribute, use a valid JSON string, for example:\n```html\n<vaadin-upload headers='{\"X-Foo\": \"Bar\"}'></vaadin-upload>\n```",
|
|
1552
1610
|
"attribute": "headers"
|
|
1553
1611
|
},
|
|
1612
|
+
{
|
|
1613
|
+
"kind": "field",
|
|
1614
|
+
"name": "i18n",
|
|
1615
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n dropFiles: {\n one: 'Drop file here',\n many: 'Drop files here'\n },\n addFiles: {\n one: 'Upload File...',\n many: 'Upload Files...'\n },\n error: {\n tooManyFiles: 'Too Many Files.',\n fileIsTooBig: 'File is Too Big.',\n incorrectFileType: 'Incorrect File Type.'\n },\n uploading: {\n status: {\n connecting: 'Connecting...',\n stalled: 'Stalled',\n processing: 'Processing File...',\n held: 'Queued'\n },\n remainingTime: {\n prefix: 'remaining time: ',\n unknown: 'unknown remaining time'\n },\n error: {\n serverUnavailable: 'Upload failed, please try again later',\n unexpectedServerError: 'Upload failed due to server error',\n forbidden: 'Upload forbidden'\n }\n },\n file: {\n retry: 'Retry',\n start: 'Start',\n remove: 'Remove'\n },\n units: {\n size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n sizeBase: 1000\n },\n formatSize: function(bytes) {\n // returns the size followed by the best suitable unit\n },\n formatTime: function(seconds, [secs, mins, hours]) {\n // returns a 'HH:MM:SS' string\n }\n}\n```",
|
|
1616
|
+
"return": {
|
|
1617
|
+
"type": {
|
|
1618
|
+
"text": "!UploadI18n"
|
|
1619
|
+
}
|
|
1620
|
+
},
|
|
1621
|
+
"parameters": [
|
|
1622
|
+
{
|
|
1623
|
+
"name": "value",
|
|
1624
|
+
"type": {
|
|
1625
|
+
"text": "Object"
|
|
1626
|
+
}
|
|
1627
|
+
}
|
|
1628
|
+
],
|
|
1629
|
+
"inheritedFrom": {
|
|
1630
|
+
"name": "I18nMixin",
|
|
1631
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1632
|
+
}
|
|
1633
|
+
},
|
|
1554
1634
|
{
|
|
1555
1635
|
"kind": "field",
|
|
1556
1636
|
"name": "maxConcurrentUploads",
|
|
@@ -1764,6 +1844,13 @@
|
|
|
1764
1844
|
"description": "Specifies the 'name' property at Content-Disposition for multipart uploads.\nThis property is ignored when uploadFormat is 'raw'.",
|
|
1765
1845
|
"fieldName": "formDataName"
|
|
1766
1846
|
},
|
|
1847
|
+
{
|
|
1848
|
+
"name": "i18n",
|
|
1849
|
+
"inheritedFrom": {
|
|
1850
|
+
"name": "I18nMixin",
|
|
1851
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
1852
|
+
}
|
|
1853
|
+
},
|
|
1767
1854
|
{
|
|
1768
1855
|
"name": "max-concurrent-uploads",
|
|
1769
1856
|
"type": {
|
|
@@ -1985,6 +2072,28 @@
|
|
|
1985
2072
|
"module": "src/vaadin-upload-mixin.js"
|
|
1986
2073
|
}
|
|
1987
2074
|
},
|
|
2075
|
+
{
|
|
2076
|
+
"kind": "field",
|
|
2077
|
+
"name": "i18n",
|
|
2078
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n dropFiles: {\n one: 'Drop file here',\n many: 'Drop files here'\n },\n addFiles: {\n one: 'Upload File...',\n many: 'Upload Files...'\n },\n error: {\n tooManyFiles: 'Too Many Files.',\n fileIsTooBig: 'File is Too Big.',\n incorrectFileType: 'Incorrect File Type.'\n },\n uploading: {\n status: {\n connecting: 'Connecting...',\n stalled: 'Stalled',\n processing: 'Processing File...',\n held: 'Queued'\n },\n remainingTime: {\n prefix: 'remaining time: ',\n unknown: 'unknown remaining time'\n },\n error: {\n serverUnavailable: 'Upload failed, please try again later',\n unexpectedServerError: 'Upload failed due to server error',\n forbidden: 'Upload forbidden'\n }\n },\n file: {\n retry: 'Retry',\n start: 'Start',\n remove: 'Remove'\n },\n units: {\n size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n sizeBase: 1000\n },\n formatSize: function(bytes) {\n // returns the size followed by the best suitable unit\n },\n formatTime: function(seconds, [secs, mins, hours]) {\n // returns a 'HH:MM:SS' string\n }\n}\n```",
|
|
2079
|
+
"return": {
|
|
2080
|
+
"type": {
|
|
2081
|
+
"text": "!UploadI18n"
|
|
2082
|
+
}
|
|
2083
|
+
},
|
|
2084
|
+
"parameters": [
|
|
2085
|
+
{
|
|
2086
|
+
"name": "value",
|
|
2087
|
+
"type": {
|
|
2088
|
+
"text": "Object"
|
|
2089
|
+
}
|
|
2090
|
+
}
|
|
2091
|
+
],
|
|
2092
|
+
"inheritedFrom": {
|
|
2093
|
+
"name": "I18nMixin",
|
|
2094
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
2095
|
+
}
|
|
2096
|
+
},
|
|
1988
2097
|
{
|
|
1989
2098
|
"kind": "field",
|
|
1990
2099
|
"name": "maxConcurrentUploads",
|
|
@@ -2362,6 +2471,13 @@
|
|
|
2362
2471
|
"module": "src/vaadin-upload-mixin.js"
|
|
2363
2472
|
}
|
|
2364
2473
|
},
|
|
2474
|
+
{
|
|
2475
|
+
"name": "i18n",
|
|
2476
|
+
"inheritedFrom": {
|
|
2477
|
+
"name": "I18nMixin",
|
|
2478
|
+
"package": "@vaadin/component-base/src/i18n-mixin.js"
|
|
2479
|
+
}
|
|
2480
|
+
},
|
|
2365
2481
|
{
|
|
2366
2482
|
"name": "max-concurrent-uploads",
|
|
2367
2483
|
"type": {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@vaadin/upload",
|
|
3
|
-
"version": "25.1.0-
|
|
3
|
+
"version": "25.1.0-alpha9",
|
|
4
4
|
"publishConfig": {
|
|
5
5
|
"access": "public"
|
|
6
6
|
},
|
|
@@ -35,19 +35,19 @@
|
|
|
35
35
|
],
|
|
36
36
|
"dependencies": {
|
|
37
37
|
"@open-wc/dedupe-mixin": "^1.3.0",
|
|
38
|
-
"@vaadin/a11y-base": "25.1.0-
|
|
39
|
-
"@vaadin/button": "25.1.0-
|
|
40
|
-
"@vaadin/component-base": "25.1.0-
|
|
41
|
-
"@vaadin/progress-bar": "25.1.0-
|
|
42
|
-
"@vaadin/vaadin-themable-mixin": "25.1.0-
|
|
38
|
+
"@vaadin/a11y-base": "25.1.0-alpha9",
|
|
39
|
+
"@vaadin/button": "25.1.0-alpha9",
|
|
40
|
+
"@vaadin/component-base": "25.1.0-alpha9",
|
|
41
|
+
"@vaadin/progress-bar": "25.1.0-alpha9",
|
|
42
|
+
"@vaadin/vaadin-themable-mixin": "25.1.0-alpha9",
|
|
43
43
|
"lit": "^3.0.0"
|
|
44
44
|
},
|
|
45
45
|
"devDependencies": {
|
|
46
|
-
"@vaadin/aura": "25.1.0-
|
|
47
|
-
"@vaadin/chai-plugins": "25.1.0-
|
|
48
|
-
"@vaadin/test-runner-commands": "25.1.0-
|
|
46
|
+
"@vaadin/aura": "25.1.0-alpha9",
|
|
47
|
+
"@vaadin/chai-plugins": "25.1.0-alpha9",
|
|
48
|
+
"@vaadin/test-runner-commands": "25.1.0-alpha9",
|
|
49
49
|
"@vaadin/testing-helpers": "^2.0.0",
|
|
50
|
-
"@vaadin/vaadin-lumo-styles": "25.1.0-
|
|
50
|
+
"@vaadin/vaadin-lumo-styles": "25.1.0-alpha9",
|
|
51
51
|
"sinon": "^21.0.0"
|
|
52
52
|
},
|
|
53
53
|
"customElements": "custom-elements.json",
|
|
@@ -55,5 +55,5 @@
|
|
|
55
55
|
"web-types.json",
|
|
56
56
|
"web-types.lit.json"
|
|
57
57
|
],
|
|
58
|
-
"gitHead": "
|
|
58
|
+
"gitHead": "ef432311376ba3dac4233cb23d393a49a425e0a4"
|
|
59
59
|
}
|
|
@@ -193,7 +193,7 @@ class UploadDropZone extends ElementMixin(ThemableMixin(PolylitMixin(LumoInjecti
|
|
|
193
193
|
event.preventDefault();
|
|
194
194
|
// Only remove dragover if we're actually leaving the drop zone
|
|
195
195
|
// (not just entering a child element)
|
|
196
|
-
if (event.
|
|
196
|
+
if (event.target !== this) {
|
|
197
197
|
return;
|
|
198
198
|
}
|
|
199
199
|
this.__dragover = false;
|
|
@@ -9,7 +9,13 @@ export type UploadFormat = 'raw' | 'multipart';
|
|
|
9
9
|
|
|
10
10
|
export type FileRejectError = 'tooManyFiles' | 'fileIsTooBig' | 'incorrectFileType';
|
|
11
11
|
|
|
12
|
-
export type UploadErrorKey =
|
|
12
|
+
export type UploadErrorKey =
|
|
13
|
+
| 'timeout'
|
|
14
|
+
| 'serverUnavailable'
|
|
15
|
+
| 'unexpectedServerError'
|
|
16
|
+
| 'forbidden'
|
|
17
|
+
| 'sendFailed'
|
|
18
|
+
| 'fileTooLarge';
|
|
13
19
|
|
|
14
20
|
export interface UploadFile extends File {
|
|
15
21
|
uploadTarget: string;
|
|
@@ -544,6 +544,8 @@ export class UploadManager extends EventTarget {
|
|
|
544
544
|
file.errorKey = 'serverUnavailable';
|
|
545
545
|
} else if (xhr.status >= 500) {
|
|
546
546
|
file.errorKey = 'unexpectedServerError';
|
|
547
|
+
} else if (xhr.status === 413) {
|
|
548
|
+
file.errorKey = 'fileTooLarge';
|
|
547
549
|
} else if (xhr.status >= 400) {
|
|
548
550
|
file.errorKey = 'forbidden';
|
|
549
551
|
}
|
|
@@ -39,6 +39,7 @@ export const DEFAULT_I18N = {
|
|
|
39
39
|
serverUnavailable: 'Upload failed, please try again later',
|
|
40
40
|
unexpectedServerError: 'Upload failed due to server error',
|
|
41
41
|
forbidden: 'Upload forbidden',
|
|
42
|
+
fileTooLarge: 'File is too large',
|
|
42
43
|
},
|
|
43
44
|
},
|
|
44
45
|
file: {
|
|
@@ -795,6 +796,8 @@ export const UploadMixin = (superClass) =>
|
|
|
795
796
|
file.error = this.__effectiveI18n.uploading.error.serverUnavailable;
|
|
796
797
|
} else if (xhr.status >= 500) {
|
|
797
798
|
file.error = this.__effectiveI18n.uploading.error.unexpectedServerError;
|
|
799
|
+
} else if (xhr.status === 413) {
|
|
800
|
+
file.error = this.__effectiveI18n.uploading.error.fileTooLarge;
|
|
798
801
|
} else if (xhr.status >= 400) {
|
|
799
802
|
file.error = this.__effectiveI18n.uploading.error.forbidden;
|
|
800
803
|
}
|
package/web-types.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/upload",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"contributions": {
|
|
7
7
|
"html": {
|
|
@@ -11,22 +11,22 @@
|
|
|
11
11
|
"description": "`<vaadin-upload-button>` is a button component for file uploads.\nWhen clicked, it opens a file picker dialog and calls addFiles\non a linked UploadManager.\n\n```html\n<vaadin-upload-button>Upload Files</vaadin-upload-button>\n```\n\nThe button must be linked to an UploadManager by setting the\n`manager` property:\n\n```javascript\nconst button = document.querySelector('vaadin-upload-button');\nbutton.manager = uploadManager;\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`label` | The label (text) inside the button.\n`prefix` | A slot for content before the label (e.g. an icon).\n`suffix` | A slot for content after the label (e.g. an icon).\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------|-------------\n`active` | Set when the button is pressed down, either with mouse, touch or the keyboard\n`disabled` | Set when the button is disabled\n`focus-ring` | Set when the button is focused using the keyboard\n`focused` | Set when the button is focused\n`has-tooltip` | Set when the button has a slotted tooltip\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:----------------------------------|\n| `--vaadin-button-background` |\n| `--vaadin-button-border-color` |\n| `--vaadin-button-border-radius` |\n| `--vaadin-button-border-width` |\n| `--vaadin-button-font-size` |\n| `--vaadin-button-font-weight` |\n| `--vaadin-button-gap` |\n| `--vaadin-button-height` |\n| `--vaadin-button-line-height` |\n| `--vaadin-button-margin` |\n| `--vaadin-button-padding` |\n| `--vaadin-button-text-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
12
12
|
"attributes": [
|
|
13
13
|
{
|
|
14
|
-
"name": "
|
|
15
|
-
"description": "
|
|
14
|
+
"name": "capture",
|
|
15
|
+
"description": "Capture attribute for mobile file input.",
|
|
16
16
|
"value": {
|
|
17
17
|
"type": [
|
|
18
|
-
"
|
|
19
|
-
"null",
|
|
20
|
-
"undefined"
|
|
18
|
+
"string"
|
|
21
19
|
]
|
|
22
20
|
}
|
|
23
21
|
},
|
|
24
22
|
{
|
|
25
|
-
"name": "
|
|
26
|
-
"description": "
|
|
23
|
+
"name": "disabled",
|
|
24
|
+
"description": "If true, the user cannot interact with this element.",
|
|
27
25
|
"value": {
|
|
28
26
|
"type": [
|
|
29
|
-
"
|
|
27
|
+
"boolean",
|
|
28
|
+
"null",
|
|
29
|
+
"undefined"
|
|
30
30
|
]
|
|
31
31
|
}
|
|
32
32
|
},
|
|
@@ -53,6 +53,15 @@
|
|
|
53
53
|
],
|
|
54
54
|
"js": {
|
|
55
55
|
"properties": [
|
|
56
|
+
{
|
|
57
|
+
"name": "capture",
|
|
58
|
+
"description": "Capture attribute for mobile file input.",
|
|
59
|
+
"value": {
|
|
60
|
+
"type": [
|
|
61
|
+
"string"
|
|
62
|
+
]
|
|
63
|
+
}
|
|
64
|
+
},
|
|
56
65
|
{
|
|
57
66
|
"name": "disabled",
|
|
58
67
|
"description": "Whether the button is disabled.\nReturns true if either explicitly disabled, manager is disabled, or maxFilesReached is true.",
|
|
@@ -72,15 +81,6 @@
|
|
|
72
81
|
]
|
|
73
82
|
}
|
|
74
83
|
},
|
|
75
|
-
{
|
|
76
|
-
"name": "capture",
|
|
77
|
-
"description": "Capture attribute for mobile file input.",
|
|
78
|
-
"value": {
|
|
79
|
-
"type": [
|
|
80
|
-
"string"
|
|
81
|
-
]
|
|
82
|
-
}
|
|
83
|
-
},
|
|
84
84
|
{
|
|
85
85
|
"name": "maxFilesReached",
|
|
86
86
|
"description": "True when max files has been reached on the manager.",
|
|
@@ -167,8 +167,8 @@
|
|
|
167
167
|
"description": "`<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------\n`thumbnail` | Image thumbnail for image files (used with `thumbnails` theme)\n`file-icon` | Generic file icon for non-image files (used with `thumbnails` theme)\n`done-icon` | File done status icon\n`warning-icon` | File warning status icon\n`meta` | Container for file name, status and error messages\n`name` | File name\n`error` | Error message, shown when error happens\n`status` | Status message\n`commands` | Container for file command buttons\n`start-button` | Start file upload button\n`retry-button` | Retry file upload button\n`remove-button` | Remove file button\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------------|-------------\n`disabled` | Set when the element is disabled\n`focus-ring` | Set when the element is focused using the keyboard.\n`focused` | Set when the element is focused.\n`error` | An error has happened during uploading.\n`indeterminate` | Uploading is in progress, but the progress value is unknown.\n`uploading` | Uploading is in progress.\n`complete` | Uploading has finished successfully.\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-upload-file-border-radius` |\n`--vaadin-upload-file-button-background` |\n`--vaadin-upload-file-button-border-color` |\n`--vaadin-upload-file-button-border-radius` |\n`--vaadin-upload-file-button-border-width` |\n`--vaadin-upload-file-button-text-color` |\n`--vaadin-upload-file-button-padding` |\n`--vaadin-upload-file-done-color` |\n`--vaadin-upload-file-error-color` |\n`--vaadin-upload-file-error-font-size` |\n`--vaadin-upload-file-error-font-weight` |\n`--vaadin-upload-file-error-line-height` |\n`--vaadin-upload-file-gap` |\n`--vaadin-upload-file-name-color` |\n`--vaadin-upload-file-name-font-size` |\n`--vaadin-upload-file-name-font-weight` |\n`--vaadin-upload-file-name-line-height` |\n`--vaadin-upload-file-padding` |\n`--vaadin-upload-file-status-color` |\n`--vaadin-upload-file-status-font-size` |\n`--vaadin-upload-file-status-font-weight` |\n`--vaadin-upload-file-status-line-height` |\n`--vaadin-upload-file-warning-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
168
168
|
"attributes": [
|
|
169
169
|
{
|
|
170
|
-
"name": "
|
|
171
|
-
"description": "
|
|
170
|
+
"name": "complete",
|
|
171
|
+
"description": "True if uploading is completed, false otherwise.",
|
|
172
172
|
"value": {
|
|
173
173
|
"type": [
|
|
174
174
|
"boolean",
|
|
@@ -178,8 +178,8 @@
|
|
|
178
178
|
}
|
|
179
179
|
},
|
|
180
180
|
{
|
|
181
|
-
"name": "
|
|
182
|
-
"description": "
|
|
181
|
+
"name": "disabled",
|
|
182
|
+
"description": "If true, the user cannot interact with this element.",
|
|
183
183
|
"value": {
|
|
184
184
|
"type": [
|
|
185
185
|
"boolean",
|
|
@@ -255,22 +255,22 @@
|
|
|
255
255
|
}
|
|
256
256
|
},
|
|
257
257
|
{
|
|
258
|
-
"name": "
|
|
259
|
-
"description": "
|
|
258
|
+
"name": "theme",
|
|
259
|
+
"description": "The theme variants to apply to the component.",
|
|
260
260
|
"value": {
|
|
261
261
|
"type": [
|
|
262
|
-
"
|
|
262
|
+
"string",
|
|
263
263
|
"null",
|
|
264
264
|
"undefined"
|
|
265
265
|
]
|
|
266
266
|
}
|
|
267
267
|
},
|
|
268
268
|
{
|
|
269
|
-
"name": "
|
|
270
|
-
"description": "
|
|
269
|
+
"name": "uploading",
|
|
270
|
+
"description": "True if uploading is in progress, false otherwise.",
|
|
271
271
|
"value": {
|
|
272
272
|
"type": [
|
|
273
|
-
"
|
|
273
|
+
"boolean",
|
|
274
274
|
"null",
|
|
275
275
|
"undefined"
|
|
276
276
|
]
|
|
@@ -280,8 +280,8 @@
|
|
|
280
280
|
"js": {
|
|
281
281
|
"properties": [
|
|
282
282
|
{
|
|
283
|
-
"name": "
|
|
284
|
-
"description": "
|
|
283
|
+
"name": "complete",
|
|
284
|
+
"description": "True if uploading is completed, false otherwise.",
|
|
285
285
|
"value": {
|
|
286
286
|
"type": [
|
|
287
287
|
"boolean",
|
|
@@ -291,8 +291,8 @@
|
|
|
291
291
|
}
|
|
292
292
|
},
|
|
293
293
|
{
|
|
294
|
-
"name": "
|
|
295
|
-
"description": "
|
|
294
|
+
"name": "disabled",
|
|
295
|
+
"description": "If true, the user cannot interact with this element.",
|
|
296
296
|
"value": {
|
|
297
297
|
"type": [
|
|
298
298
|
"boolean",
|
|
@@ -346,22 +346,22 @@
|
|
|
346
346
|
}
|
|
347
347
|
},
|
|
348
348
|
{
|
|
349
|
-
"name": "
|
|
350
|
-
"description": "
|
|
349
|
+
"name": "i18n",
|
|
350
|
+
"description": "The object used to localize this component.",
|
|
351
351
|
"value": {
|
|
352
352
|
"type": [
|
|
353
|
-
"
|
|
353
|
+
"Object",
|
|
354
354
|
"null",
|
|
355
355
|
"undefined"
|
|
356
356
|
]
|
|
357
357
|
}
|
|
358
358
|
},
|
|
359
359
|
{
|
|
360
|
-
"name": "
|
|
361
|
-
"description": "
|
|
360
|
+
"name": "indeterminate",
|
|
361
|
+
"description": "True if remaining time is unknown, false otherwise.",
|
|
362
362
|
"value": {
|
|
363
363
|
"type": [
|
|
364
|
-
"
|
|
364
|
+
"boolean",
|
|
365
365
|
"null",
|
|
366
366
|
"undefined"
|
|
367
367
|
]
|
|
@@ -421,15 +421,6 @@
|
|
|
421
421
|
"name": "vaadin-upload-file-list",
|
|
422
422
|
"description": "`<vaadin-upload-file-list>` is a Web Component that displays a list of uploaded files.\nIt automatically syncs files from the manager and forwards file events back to it.\n\n```html\n<vaadin-upload-file-list></vaadin-upload-file-list>\n```\n\nThe file list must be linked to an UploadManager by setting the `manager` property:\n\n```javascript\nimport { UploadManager } from '@vaadin/upload/vaadin-upload-manager.js';\n\nconst manager = new UploadManager({ target: '/api/upload' });\nconst fileList = document.querySelector('vaadin-upload-file-list');\nfileList.manager = manager;\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n----------|-------------\n`list` | The `<ul>` element wrapping the file items\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n-----------|-------------\n`disabled` | Set when the element is disabled\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-upload-file-list-divider-color` |\n`--vaadin-upload-file-list-divider-width` |\n`--vaadin-upload-file-border-radius` |\n`--vaadin-upload-file-button-background` |\n`--vaadin-upload-file-button-border-color` |\n`--vaadin-upload-file-button-border-radius` |\n`--vaadin-upload-file-button-border-width` |\n`--vaadin-upload-file-button-text-color` |\n`--vaadin-upload-file-button-padding` |\n`--vaadin-upload-file-done-color` |\n`--vaadin-upload-file-error-color` |\n`--vaadin-upload-file-error-font-size` |\n`--vaadin-upload-file-error-font-weight` |\n`--vaadin-upload-file-error-line-height` |\n`--vaadin-upload-file-gap` |\n`--vaadin-upload-file-name-color` |\n`--vaadin-upload-file-name-font-size` |\n`--vaadin-upload-file-name-font-weight` |\n`--vaadin-upload-file-name-line-height` |\n`--vaadin-upload-file-padding` |\n`--vaadin-upload-file-status-color` |\n`--vaadin-upload-file-status-font-size` |\n`--vaadin-upload-file-status-font-weight` |\n`--vaadin-upload-file-status-line-height` |\n`--vaadin-upload-file-warning-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
423
423
|
"attributes": [
|
|
424
|
-
{
|
|
425
|
-
"name": "i18n",
|
|
426
|
-
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
427
|
-
"value": {
|
|
428
|
-
"type": [
|
|
429
|
-
"Object"
|
|
430
|
-
]
|
|
431
|
-
}
|
|
432
|
-
},
|
|
433
424
|
{
|
|
434
425
|
"name": "disabled",
|
|
435
426
|
"description": "If true, the user cannot interact with this element.",
|
|
@@ -456,31 +447,31 @@
|
|
|
456
447
|
"js": {
|
|
457
448
|
"properties": [
|
|
458
449
|
{
|
|
459
|
-
"name": "
|
|
460
|
-
"description": "
|
|
450
|
+
"name": "disabled",
|
|
451
|
+
"description": "If true, the user cannot interact with this element.",
|
|
461
452
|
"value": {
|
|
462
453
|
"type": [
|
|
463
|
-
"
|
|
454
|
+
"boolean",
|
|
455
|
+
"null",
|
|
456
|
+
"undefined"
|
|
464
457
|
]
|
|
465
458
|
}
|
|
466
459
|
},
|
|
467
460
|
{
|
|
468
|
-
"name": "
|
|
469
|
-
"description": "The
|
|
461
|
+
"name": "i18n",
|
|
462
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nShould be overridden by subclasses to provide a custom JSDoc with the\ndefault I18N properties.",
|
|
470
463
|
"value": {
|
|
471
464
|
"type": [
|
|
472
|
-
"
|
|
473
|
-
"null",
|
|
474
|
-
"undefined"
|
|
465
|
+
"Object"
|
|
475
466
|
]
|
|
476
467
|
}
|
|
477
468
|
},
|
|
478
469
|
{
|
|
479
|
-
"name": "
|
|
480
|
-
"description": "
|
|
470
|
+
"name": "items",
|
|
471
|
+
"description": "The array of files being processed, or already uploaded.",
|
|
481
472
|
"value": {
|
|
482
473
|
"type": [
|
|
483
|
-
"
|
|
474
|
+
"Array",
|
|
484
475
|
"null",
|
|
485
476
|
"undefined"
|
|
486
477
|
]
|
|
@@ -505,44 +496,46 @@
|
|
|
505
496
|
"description": "`<vaadin-upload>` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```html\n<vaadin-upload></vaadin-upload>\n```\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-------------------|-------------------------------------\n`primary-buttons` | Upload container\n`drop-label` | Element wrapping drop label and icon\n\nThe following state attributes are available for styling:\n\nAttribute | Description\n---------------------|---------------------------------\n`disabled` | Set when the element is disabled\n`nodrop` | Set when drag and drop is disabled (e.g., on touch devices)\n`dragover` | Set when the file is being dragged over the element\n`dragover-valid` | Set when the dragged file is valid with `maxFiles` and `accept` criteria\n`max-files-reached` | Set when maximum number of files that the user is allowed to add has been reached\n\nThe following custom CSS properties are available for styling:\n\nCustom CSS property |\n:--------------------------------------------|\n`--vaadin-upload-background` |\n`--vaadin-upload-border-color` |\n`--vaadin-upload-border-radius` |\n`--vaadin-upload-border-width` |\n`--vaadin-upload-gap` |\n`--vaadin-upload-padding` |\n`--vaadin-upload-drop-label-color` |\n`--vaadin-upload-drop-label-font-size` |\n`--vaadin-upload-drop-label-font-weight` |\n`--vaadin-upload-drop-label-gap` |\n`--vaadin-upload-drop-label-line-height` |\n`--vaadin-upload-file-list-divider-color` |\n`--vaadin-upload-file-list-divider-width` |\n`--vaadin-upload-file-border-radius` |\n`--vaadin-upload-file-button-background` |\n`--vaadin-upload-file-button-border-color` |\n`--vaadin-upload-file-button-border-radius` |\n`--vaadin-upload-file-button-border-width` |\n`--vaadin-upload-file-button-text-color` |\n`--vaadin-upload-file-button-padding` |\n`--vaadin-upload-file-done-color` |\n`--vaadin-upload-file-error-color` |\n`--vaadin-upload-file-error-font-size` |\n`--vaadin-upload-file-error-font-weight` |\n`--vaadin-upload-file-error-line-height` |\n`--vaadin-upload-file-gap` |\n`--vaadin-upload-file-name-color` |\n`--vaadin-upload-file-name-font-size` |\n`--vaadin-upload-file-name-font-weight` |\n`--vaadin-upload-file-name-line-height` |\n`--vaadin-upload-file-padding` |\n`--vaadin-upload-file-status-color` |\n`--vaadin-upload-file-status-font-size` |\n`--vaadin-upload-file-status-font-weight` |\n`--vaadin-upload-file-status-line-height` |\n`--vaadin-upload-file-warning-color` |\n\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
|
|
506
497
|
"attributes": [
|
|
507
498
|
{
|
|
508
|
-
"name": "
|
|
509
|
-
"description": "
|
|
499
|
+
"name": "accept",
|
|
500
|
+
"description": "Specifies the types of files that the server accepts.\nSyntax: a comma-separated list of MIME type patterns (wildcards are\nallowed) or file extensions.\nNotice that MIME types are widely supported, while file extensions\nare only implemented in certain browsers, so avoid using it.\nExample: accept=\"video/*,image/tiff\" or accept=\".pdf,audio/mp3\"",
|
|
510
501
|
"value": {
|
|
511
502
|
"type": [
|
|
512
|
-
"
|
|
503
|
+
"string"
|
|
513
504
|
]
|
|
514
505
|
}
|
|
515
506
|
},
|
|
516
507
|
{
|
|
517
|
-
"name": "
|
|
518
|
-
"description": "
|
|
508
|
+
"name": "capture",
|
|
509
|
+
"description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",
|
|
519
510
|
"value": {
|
|
520
511
|
"type": [
|
|
521
|
-
"
|
|
512
|
+
"string",
|
|
513
|
+
"null",
|
|
514
|
+
"undefined"
|
|
522
515
|
]
|
|
523
516
|
}
|
|
524
517
|
},
|
|
525
518
|
{
|
|
526
|
-
"name": "
|
|
527
|
-
"description": "
|
|
519
|
+
"name": "disabled",
|
|
520
|
+
"description": "If true, the user cannot interact with this element.",
|
|
528
521
|
"value": {
|
|
529
522
|
"type": [
|
|
530
|
-
"
|
|
523
|
+
"boolean"
|
|
531
524
|
]
|
|
532
525
|
}
|
|
533
526
|
},
|
|
534
527
|
{
|
|
535
|
-
"name": "
|
|
536
|
-
"description": "
|
|
528
|
+
"name": "form-data-name",
|
|
529
|
+
"description": "Specifies the 'name' property at Content-Disposition for multipart uploads.\nThis property is ignored when uploadFormat is 'raw'.",
|
|
537
530
|
"value": {
|
|
538
531
|
"type": [
|
|
539
|
-
"
|
|
532
|
+
"string"
|
|
540
533
|
]
|
|
541
534
|
}
|
|
542
535
|
},
|
|
543
536
|
{
|
|
544
|
-
"name": "
|
|
545
|
-
"description": "
|
|
537
|
+
"name": "max-concurrent-uploads",
|
|
538
|
+
"description": "Specifies the maximum number of files that can be uploaded simultaneously.\nThis helps prevent browser performance degradation and XHR limitations when\nuploading large numbers of files. Files exceeding this limit will be queued\nand uploaded as active uploads complete.",
|
|
546
539
|
"value": {
|
|
547
540
|
"type": [
|
|
548
541
|
"number"
|
|
@@ -550,8 +543,8 @@
|
|
|
550
543
|
}
|
|
551
544
|
},
|
|
552
545
|
{
|
|
553
|
-
"name": "max-
|
|
554
|
-
"description": "
|
|
546
|
+
"name": "max-file-size",
|
|
547
|
+
"description": "Specifies the maximum file size in bytes allowed to upload.\nNotice that it is a client-side constraint, which will be checked before\nsending the request. Obviously you need to do the same validation in\nthe server-side and be sure that they are aligned.",
|
|
555
548
|
"value": {
|
|
556
549
|
"type": [
|
|
557
550
|
"number"
|
|
@@ -559,35 +552,35 @@
|
|
|
559
552
|
}
|
|
560
553
|
},
|
|
561
554
|
{
|
|
562
|
-
"name": "
|
|
563
|
-
"description": "
|
|
555
|
+
"name": "max-files",
|
|
556
|
+
"description": "Limit of files to upload, by default it is unlimited. If the value is\nset to one, native file browser will prevent selecting multiple files.",
|
|
564
557
|
"value": {
|
|
565
558
|
"type": [
|
|
566
|
-
"
|
|
559
|
+
"number"
|
|
567
560
|
]
|
|
568
561
|
}
|
|
569
562
|
},
|
|
570
563
|
{
|
|
571
|
-
"name": "
|
|
572
|
-
"description": "
|
|
564
|
+
"name": "method",
|
|
565
|
+
"description": "HTTP Method used to send the files. Only POST and PUT are allowed.",
|
|
573
566
|
"value": {
|
|
574
567
|
"type": [
|
|
575
|
-
"
|
|
568
|
+
"UploadMethod"
|
|
576
569
|
]
|
|
577
570
|
}
|
|
578
571
|
},
|
|
579
572
|
{
|
|
580
|
-
"name": "
|
|
581
|
-
"description": "
|
|
573
|
+
"name": "no-auto",
|
|
574
|
+
"description": "Prevents upload(s) from immediately uploading upon adding file(s).\nWhen set, you must manually trigger uploads using the `uploadFiles` method",
|
|
582
575
|
"value": {
|
|
583
576
|
"type": [
|
|
584
|
-
"
|
|
577
|
+
"boolean"
|
|
585
578
|
]
|
|
586
579
|
}
|
|
587
580
|
},
|
|
588
581
|
{
|
|
589
|
-
"name": "
|
|
590
|
-
"description": "
|
|
582
|
+
"name": "nodrop",
|
|
583
|
+
"description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",
|
|
591
584
|
"value": {
|
|
592
585
|
"type": [
|
|
593
586
|
"boolean"
|
|
@@ -595,26 +588,28 @@
|
|
|
595
588
|
}
|
|
596
589
|
},
|
|
597
590
|
{
|
|
598
|
-
"name": "
|
|
599
|
-
"description": "
|
|
591
|
+
"name": "target",
|
|
592
|
+
"description": "The server URL. The default value is an empty string, which means that\n_window.location_ will be used.",
|
|
600
593
|
"value": {
|
|
601
594
|
"type": [
|
|
602
|
-
"
|
|
595
|
+
"string"
|
|
603
596
|
]
|
|
604
597
|
}
|
|
605
598
|
},
|
|
606
599
|
{
|
|
607
|
-
"name": "
|
|
608
|
-
"description": "
|
|
600
|
+
"name": "theme",
|
|
601
|
+
"description": "The theme variants to apply to the component.",
|
|
609
602
|
"value": {
|
|
610
603
|
"type": [
|
|
611
|
-
"string"
|
|
604
|
+
"string",
|
|
605
|
+
"null",
|
|
606
|
+
"undefined"
|
|
612
607
|
]
|
|
613
608
|
}
|
|
614
609
|
},
|
|
615
610
|
{
|
|
616
|
-
"name": "
|
|
617
|
-
"description": "
|
|
611
|
+
"name": "timeout",
|
|
612
|
+
"description": "Max time in milliseconds for the entire upload process, if exceeded the\nrequest will be aborted. Zero means that there is no timeout.",
|
|
618
613
|
"value": {
|
|
619
614
|
"type": [
|
|
620
615
|
"number"
|
|
@@ -622,24 +617,20 @@
|
|
|
622
617
|
}
|
|
623
618
|
},
|
|
624
619
|
{
|
|
625
|
-
"name": "
|
|
626
|
-
"description": "
|
|
620
|
+
"name": "upload-format",
|
|
621
|
+
"description": "Specifies the upload format to use when sending files to the server.\n- 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default)\n- 'multipart': Send file using multipart/form-data encoding",
|
|
627
622
|
"value": {
|
|
628
623
|
"type": [
|
|
629
|
-
"string"
|
|
630
|
-
"null",
|
|
631
|
-
"undefined"
|
|
624
|
+
"string"
|
|
632
625
|
]
|
|
633
626
|
}
|
|
634
627
|
},
|
|
635
628
|
{
|
|
636
|
-
"name": "
|
|
637
|
-
"description": "
|
|
629
|
+
"name": "with-credentials",
|
|
630
|
+
"description": "Set the withCredentials flag on the request.",
|
|
638
631
|
"value": {
|
|
639
632
|
"type": [
|
|
640
|
-
"
|
|
641
|
-
"null",
|
|
642
|
-
"undefined"
|
|
633
|
+
"boolean"
|
|
643
634
|
]
|
|
644
635
|
}
|
|
645
636
|
}
|
|
@@ -647,26 +638,28 @@
|
|
|
647
638
|
"js": {
|
|
648
639
|
"properties": [
|
|
649
640
|
{
|
|
650
|
-
"name": "
|
|
651
|
-
"description": "
|
|
641
|
+
"name": "accept",
|
|
642
|
+
"description": "Specifies the types of files that the server accepts.\nSyntax: a comma-separated list of MIME type patterns (wildcards are\nallowed) or file extensions.\nNotice that MIME types are widely supported, while file extensions\nare only implemented in certain browsers, so avoid using it.\nExample: accept=\"video/*,image/tiff\" or accept=\".pdf,audio/mp3\"",
|
|
652
643
|
"value": {
|
|
653
644
|
"type": [
|
|
654
|
-
"
|
|
645
|
+
"string"
|
|
655
646
|
]
|
|
656
647
|
}
|
|
657
648
|
},
|
|
658
649
|
{
|
|
659
|
-
"name": "
|
|
660
|
-
"description": "
|
|
650
|
+
"name": "capture",
|
|
651
|
+
"description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",
|
|
661
652
|
"value": {
|
|
662
653
|
"type": [
|
|
663
|
-
"
|
|
654
|
+
"string",
|
|
655
|
+
"null",
|
|
656
|
+
"undefined"
|
|
664
657
|
]
|
|
665
658
|
}
|
|
666
659
|
},
|
|
667
660
|
{
|
|
668
|
-
"name": "
|
|
669
|
-
"description": "
|
|
661
|
+
"name": "disabled",
|
|
662
|
+
"description": "If true, the user cannot interact with this element.",
|
|
670
663
|
"value": {
|
|
671
664
|
"type": [
|
|
672
665
|
"boolean"
|
|
@@ -674,20 +667,20 @@
|
|
|
674
667
|
}
|
|
675
668
|
},
|
|
676
669
|
{
|
|
677
|
-
"name": "
|
|
678
|
-
"description": "The
|
|
670
|
+
"name": "files",
|
|
671
|
+
"description": "The array of files being processed, or already uploaded.\n\nEach element is a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)\nobject with a number of extra properties to track the upload process:\n- `uploadTarget`: The target URL used to upload this file.\n- `elapsed`: Elapsed time since the upload started.\n- `elapsedStr`: Human-readable elapsed time.\n- `remaining`: Number of seconds remaining for the upload to finish.\n- `remainingStr`: Human-readable remaining time for the upload to finish.\n- `progress`: Percentage of the file already uploaded.\n- `speed`: Upload speed in kB/s.\n- `size`: File size in bytes.\n- `totalStr`: Human-readable total size of the file.\n- `loaded`: Bytes transferred so far.\n- `loadedStr`: Human-readable uploaded size at the moment.\n- `status`: Status of the upload process.\n- `error`: Error message in case the upload failed.\n- `abort`: True if the file was canceled by the user.\n- `complete`: True when the file was transferred to the server.\n- `uploading`: True while transferring data to the server.",
|
|
679
672
|
"value": {
|
|
680
673
|
"type": [
|
|
681
|
-
"
|
|
674
|
+
"Array.<UploadFile>"
|
|
682
675
|
]
|
|
683
676
|
}
|
|
684
677
|
},
|
|
685
678
|
{
|
|
686
|
-
"name": "
|
|
687
|
-
"description": "
|
|
679
|
+
"name": "formDataName",
|
|
680
|
+
"description": "Specifies the 'name' property at Content-Disposition for multipart uploads.\nThis property is ignored when uploadFormat is 'raw'.",
|
|
688
681
|
"value": {
|
|
689
682
|
"type": [
|
|
690
|
-
"
|
|
683
|
+
"string"
|
|
691
684
|
]
|
|
692
685
|
}
|
|
693
686
|
},
|
|
@@ -702,20 +695,20 @@
|
|
|
702
695
|
}
|
|
703
696
|
},
|
|
704
697
|
{
|
|
705
|
-
"name": "
|
|
706
|
-
"description": "
|
|
698
|
+
"name": "i18n",
|
|
699
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n dropFiles: {\n one: 'Drop file here',\n many: 'Drop files here'\n },\n addFiles: {\n one: 'Upload File...',\n many: 'Upload Files...'\n },\n error: {\n tooManyFiles: 'Too Many Files.',\n fileIsTooBig: 'File is Too Big.',\n incorrectFileType: 'Incorrect File Type.'\n },\n uploading: {\n status: {\n connecting: 'Connecting...',\n stalled: 'Stalled',\n processing: 'Processing File...',\n held: 'Queued'\n },\n remainingTime: {\n prefix: 'remaining time: ',\n unknown: 'unknown remaining time'\n },\n error: {\n serverUnavailable: 'Upload failed, please try again later',\n unexpectedServerError: 'Upload failed due to server error',\n forbidden: 'Upload forbidden'\n }\n },\n file: {\n retry: 'Retry',\n start: 'Start',\n remove: 'Remove'\n },\n units: {\n size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n sizeBase: 1000\n },\n formatSize: function(bytes) {\n // returns the size followed by the best suitable unit\n },\n formatTime: function(seconds, [secs, mins, hours]) {\n // returns a 'HH:MM:SS' string\n }\n}\n```",
|
|
707
700
|
"value": {
|
|
708
701
|
"type": [
|
|
709
|
-
"
|
|
702
|
+
"UploadI18n"
|
|
710
703
|
]
|
|
711
704
|
}
|
|
712
705
|
},
|
|
713
706
|
{
|
|
714
|
-
"name": "
|
|
715
|
-
"description": "
|
|
707
|
+
"name": "maxConcurrentUploads",
|
|
708
|
+
"description": "Specifies the maximum number of files that can be uploaded simultaneously.\nThis helps prevent browser performance degradation and XHR limitations when\nuploading large numbers of files. Files exceeding this limit will be queued\nand uploaded as active uploads complete.",
|
|
716
709
|
"value": {
|
|
717
710
|
"type": [
|
|
718
|
-
"
|
|
711
|
+
"number"
|
|
719
712
|
]
|
|
720
713
|
}
|
|
721
714
|
},
|
|
@@ -728,15 +721,6 @@
|
|
|
728
721
|
]
|
|
729
722
|
}
|
|
730
723
|
},
|
|
731
|
-
{
|
|
732
|
-
"name": "accept",
|
|
733
|
-
"description": "Specifies the types of files that the server accepts.\nSyntax: a comma-separated list of MIME type patterns (wildcards are\nallowed) or file extensions.\nNotice that MIME types are widely supported, while file extensions\nare only implemented in certain browsers, so avoid using it.\nExample: accept=\"video/*,image/tiff\" or accept=\".pdf,audio/mp3\"",
|
|
734
|
-
"value": {
|
|
735
|
-
"type": [
|
|
736
|
-
"string"
|
|
737
|
-
]
|
|
738
|
-
}
|
|
739
|
-
},
|
|
740
724
|
{
|
|
741
725
|
"name": "maxFileSize",
|
|
742
726
|
"description": "Specifies the maximum file size in bytes allowed to upload.\nNotice that it is a client-side constraint, which will be checked before\nsending the request. Obviously you need to do the same validation in\nthe server-side and be sure that they are aligned.",
|
|
@@ -747,11 +731,11 @@
|
|
|
747
731
|
}
|
|
748
732
|
},
|
|
749
733
|
{
|
|
750
|
-
"name": "
|
|
751
|
-
"description": "
|
|
734
|
+
"name": "method",
|
|
735
|
+
"description": "HTTP Method used to send the files. Only POST and PUT are allowed.",
|
|
752
736
|
"value": {
|
|
753
737
|
"type": [
|
|
754
|
-
"
|
|
738
|
+
"UploadMethod"
|
|
755
739
|
]
|
|
756
740
|
}
|
|
757
741
|
},
|
|
@@ -765,8 +749,8 @@
|
|
|
765
749
|
}
|
|
766
750
|
},
|
|
767
751
|
{
|
|
768
|
-
"name": "
|
|
769
|
-
"description": "
|
|
752
|
+
"name": "nodrop",
|
|
753
|
+
"description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",
|
|
770
754
|
"value": {
|
|
771
755
|
"type": [
|
|
772
756
|
"boolean"
|
|
@@ -774,8 +758,8 @@
|
|
|
774
758
|
}
|
|
775
759
|
},
|
|
776
760
|
{
|
|
777
|
-
"name": "
|
|
778
|
-
"description": "
|
|
761
|
+
"name": "target",
|
|
762
|
+
"description": "The server URL. The default value is an empty string, which means that\n_window.location_ will be used.",
|
|
779
763
|
"value": {
|
|
780
764
|
"type": [
|
|
781
765
|
"string"
|
|
@@ -783,8 +767,8 @@
|
|
|
783
767
|
}
|
|
784
768
|
},
|
|
785
769
|
{
|
|
786
|
-
"name": "
|
|
787
|
-
"description": "
|
|
770
|
+
"name": "timeout",
|
|
771
|
+
"description": "Max time in milliseconds for the entire upload process, if exceeded the\nrequest will be aborted. Zero means that there is no timeout.",
|
|
788
772
|
"value": {
|
|
789
773
|
"type": [
|
|
790
774
|
"number"
|
|
@@ -792,13 +776,20 @@
|
|
|
792
776
|
}
|
|
793
777
|
},
|
|
794
778
|
{
|
|
795
|
-
"name": "
|
|
796
|
-
"description": "
|
|
779
|
+
"name": "uploadFormat",
|
|
780
|
+
"description": "Specifies the upload format to use when sending files to the server.\n- 'raw': Send file as raw binary data with the file's MIME type as Content-Type (default)\n- 'multipart': Send file using multipart/form-data encoding",
|
|
797
781
|
"value": {
|
|
798
782
|
"type": [
|
|
799
|
-
"string"
|
|
800
|
-
|
|
801
|
-
|
|
783
|
+
"string"
|
|
784
|
+
]
|
|
785
|
+
}
|
|
786
|
+
},
|
|
787
|
+
{
|
|
788
|
+
"name": "withCredentials",
|
|
789
|
+
"description": "Set the withCredentials flag on the request.",
|
|
790
|
+
"value": {
|
|
791
|
+
"type": [
|
|
792
|
+
"boolean"
|
|
802
793
|
]
|
|
803
794
|
}
|
|
804
795
|
}
|
|
@@ -808,6 +799,14 @@
|
|
|
808
799
|
"name": "file-reject",
|
|
809
800
|
"description": "Fired when a file cannot be added to the queue due to a constrain:\n file-size, file-type or maxFiles"
|
|
810
801
|
},
|
|
802
|
+
{
|
|
803
|
+
"name": "files-changed",
|
|
804
|
+
"description": "Fired when the `files` property changes."
|
|
805
|
+
},
|
|
806
|
+
{
|
|
807
|
+
"name": "max-files-reached-changed",
|
|
808
|
+
"description": "Fired when the `maxFilesReached` property changes."
|
|
809
|
+
},
|
|
811
810
|
{
|
|
812
811
|
"name": "upload-abort",
|
|
813
812
|
"description": "Fired when retry abort is requested. If the default is prevented, then the\nfile upload would not be aborted."
|
|
@@ -843,14 +842,6 @@
|
|
|
843
842
|
{
|
|
844
843
|
"name": "upload-success",
|
|
845
844
|
"description": "Fired in case the upload process succeed."
|
|
846
|
-
},
|
|
847
|
-
{
|
|
848
|
-
"name": "files-changed",
|
|
849
|
-
"description": "Fired when the `files` property changes."
|
|
850
|
-
},
|
|
851
|
-
{
|
|
852
|
-
"name": "max-files-reached-changed",
|
|
853
|
-
"description": "Fired when the `maxFilesReached` property changes."
|
|
854
845
|
}
|
|
855
846
|
]
|
|
856
847
|
}
|
package/web-types.lit.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"$schema": "https://json.schemastore.org/web-types",
|
|
3
3
|
"name": "@vaadin/upload",
|
|
4
|
-
"version": "25.1.0-
|
|
4
|
+
"version": "25.1.0-alpha9",
|
|
5
5
|
"description-markup": "markdown",
|
|
6
6
|
"framework": "lit",
|
|
7
7
|
"framework-config": {
|
|
@@ -27,22 +27,22 @@
|
|
|
27
27
|
}
|
|
28
28
|
},
|
|
29
29
|
{
|
|
30
|
-
"name": ".
|
|
31
|
-
"description": "
|
|
30
|
+
"name": ".capture",
|
|
31
|
+
"description": "Capture attribute for mobile file input.",
|
|
32
32
|
"value": {
|
|
33
33
|
"kind": "expression"
|
|
34
34
|
}
|
|
35
35
|
},
|
|
36
36
|
{
|
|
37
|
-
"name": ".
|
|
38
|
-
"description": "
|
|
37
|
+
"name": ".disabled",
|
|
38
|
+
"description": "Whether the button is disabled.\nReturns true if either explicitly disabled, manager is disabled, or maxFilesReached is true.",
|
|
39
39
|
"value": {
|
|
40
40
|
"kind": "expression"
|
|
41
41
|
}
|
|
42
42
|
},
|
|
43
43
|
{
|
|
44
|
-
"name": ".
|
|
45
|
-
"description": "
|
|
44
|
+
"name": ".manager",
|
|
45
|
+
"description": "Reference to an UploadManager.\nWhen set, the button will automatically disable when maxFilesReached\nbecomes true on the manager.",
|
|
46
46
|
"value": {
|
|
47
47
|
"kind": "expression"
|
|
48
48
|
}
|
|
@@ -83,15 +83,15 @@
|
|
|
83
83
|
"extension": true,
|
|
84
84
|
"attributes": [
|
|
85
85
|
{
|
|
86
|
-
"name": "?
|
|
87
|
-
"description": "
|
|
86
|
+
"name": "?complete",
|
|
87
|
+
"description": "True if uploading is completed, false otherwise.",
|
|
88
88
|
"value": {
|
|
89
89
|
"kind": "expression"
|
|
90
90
|
}
|
|
91
91
|
},
|
|
92
92
|
{
|
|
93
|
-
"name": "?
|
|
94
|
-
"description": "
|
|
93
|
+
"name": "?disabled",
|
|
94
|
+
"description": "If true, the user cannot interact with this element.",
|
|
95
95
|
"value": {
|
|
96
96
|
"kind": "expression"
|
|
97
97
|
}
|
|
@@ -230,15 +230,15 @@
|
|
|
230
230
|
}
|
|
231
231
|
},
|
|
232
232
|
{
|
|
233
|
-
"name": "?
|
|
234
|
-
"description": "
|
|
233
|
+
"name": "?noAuto",
|
|
234
|
+
"description": "Prevents upload(s) from immediately uploading upon adding file(s).\nWhen set, you must manually trigger uploads using the `uploadFiles` method",
|
|
235
235
|
"value": {
|
|
236
236
|
"kind": "expression"
|
|
237
237
|
}
|
|
238
238
|
},
|
|
239
239
|
{
|
|
240
|
-
"name": "?
|
|
241
|
-
"description": "
|
|
240
|
+
"name": "?nodrop",
|
|
241
|
+
"description": "Define whether the element supports dropping files on it for uploading.\nBy default it's enabled in desktop and disabled in touch devices\nbecause mobile devices do not support drag events in general. Setting\nit false means that drop is enabled even in touch-devices, and true\ndisables drop in all devices.",
|
|
242
242
|
"value": {
|
|
243
243
|
"kind": "expression"
|
|
244
244
|
}
|
|
@@ -251,22 +251,29 @@
|
|
|
251
251
|
}
|
|
252
252
|
},
|
|
253
253
|
{
|
|
254
|
-
"name": ".
|
|
255
|
-
"description": "
|
|
254
|
+
"name": ".accept",
|
|
255
|
+
"description": "Specifies the types of files that the server accepts.\nSyntax: a comma-separated list of MIME type patterns (wildcards are\nallowed) or file extensions.\nNotice that MIME types are widely supported, while file extensions\nare only implemented in certain browsers, so avoid using it.\nExample: accept=\"video/*,image/tiff\" or accept=\".pdf,audio/mp3\"",
|
|
256
256
|
"value": {
|
|
257
257
|
"kind": "expression"
|
|
258
258
|
}
|
|
259
259
|
},
|
|
260
260
|
{
|
|
261
|
-
"name": ".
|
|
262
|
-
"description": "
|
|
261
|
+
"name": ".capture",
|
|
262
|
+
"description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",
|
|
263
263
|
"value": {
|
|
264
264
|
"kind": "expression"
|
|
265
265
|
}
|
|
266
266
|
},
|
|
267
267
|
{
|
|
268
|
-
"name": ".
|
|
269
|
-
"description": "
|
|
268
|
+
"name": ".files",
|
|
269
|
+
"description": "The array of files being processed, or already uploaded.\n\nEach element is a [`File`](https://developer.mozilla.org/en-US/docs/Web/API/File)\nobject with a number of extra properties to track the upload process:\n- `uploadTarget`: The target URL used to upload this file.\n- `elapsed`: Elapsed time since the upload started.\n- `elapsedStr`: Human-readable elapsed time.\n- `remaining`: Number of seconds remaining for the upload to finish.\n- `remainingStr`: Human-readable remaining time for the upload to finish.\n- `progress`: Percentage of the file already uploaded.\n- `speed`: Upload speed in kB/s.\n- `size`: File size in bytes.\n- `totalStr`: Human-readable total size of the file.\n- `loaded`: Bytes transferred so far.\n- `loadedStr`: Human-readable uploaded size at the moment.\n- `status`: Status of the upload process.\n- `error`: Error message in case the upload failed.\n- `abort`: True if the file was canceled by the user.\n- `complete`: True when the file was transferred to the server.\n- `uploading`: True while transferring data to the server.",
|
|
270
|
+
"value": {
|
|
271
|
+
"kind": "expression"
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
{
|
|
275
|
+
"name": ".formDataName",
|
|
276
|
+
"description": "Specifies the 'name' property at Content-Disposition for multipart uploads.\nThis property is ignored when uploadFormat is 'raw'.",
|
|
270
277
|
"value": {
|
|
271
278
|
"kind": "expression"
|
|
272
279
|
}
|
|
@@ -279,15 +286,15 @@
|
|
|
279
286
|
}
|
|
280
287
|
},
|
|
281
288
|
{
|
|
282
|
-
"name": ".
|
|
283
|
-
"description": "
|
|
289
|
+
"name": ".i18n",
|
|
290
|
+
"description": "The object used to localize this component. To change the default\nlocalization, replace this with an object that provides all properties, or\njust the individual properties you want to change.\n\nThe object has the following JSON structure and default values:\n\n```js\n{\n dropFiles: {\n one: 'Drop file here',\n many: 'Drop files here'\n },\n addFiles: {\n one: 'Upload File...',\n many: 'Upload Files...'\n },\n error: {\n tooManyFiles: 'Too Many Files.',\n fileIsTooBig: 'File is Too Big.',\n incorrectFileType: 'Incorrect File Type.'\n },\n uploading: {\n status: {\n connecting: 'Connecting...',\n stalled: 'Stalled',\n processing: 'Processing File...',\n held: 'Queued'\n },\n remainingTime: {\n prefix: 'remaining time: ',\n unknown: 'unknown remaining time'\n },\n error: {\n serverUnavailable: 'Upload failed, please try again later',\n unexpectedServerError: 'Upload failed due to server error',\n forbidden: 'Upload forbidden'\n }\n },\n file: {\n retry: 'Retry',\n start: 'Start',\n remove: 'Remove'\n },\n units: {\n size: ['B', 'kB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB'],\n sizeBase: 1000\n },\n formatSize: function(bytes) {\n // returns the size followed by the best suitable unit\n },\n formatTime: function(seconds, [secs, mins, hours]) {\n // returns a 'HH:MM:SS' string\n }\n}\n```",
|
|
284
291
|
"value": {
|
|
285
292
|
"kind": "expression"
|
|
286
293
|
}
|
|
287
294
|
},
|
|
288
295
|
{
|
|
289
|
-
"name": ".
|
|
290
|
-
"description": "
|
|
296
|
+
"name": ".maxConcurrentUploads",
|
|
297
|
+
"description": "Specifies the maximum number of files that can be uploaded simultaneously.\nThis helps prevent browser performance degradation and XHR limitations when\nuploading large numbers of files. Files exceeding this limit will be queued\nand uploaded as active uploads complete.",
|
|
291
298
|
"value": {
|
|
292
299
|
"kind": "expression"
|
|
293
300
|
}
|
|
@@ -300,22 +307,29 @@
|
|
|
300
307
|
}
|
|
301
308
|
},
|
|
302
309
|
{
|
|
303
|
-
"name": ".
|
|
304
|
-
"description": "Specifies the
|
|
310
|
+
"name": ".maxFileSize",
|
|
311
|
+
"description": "Specifies the maximum file size in bytes allowed to upload.\nNotice that it is a client-side constraint, which will be checked before\nsending the request. Obviously you need to do the same validation in\nthe server-side and be sure that they are aligned.",
|
|
305
312
|
"value": {
|
|
306
313
|
"kind": "expression"
|
|
307
314
|
}
|
|
308
315
|
},
|
|
309
316
|
{
|
|
310
|
-
"name": ".
|
|
311
|
-
"description": "
|
|
317
|
+
"name": ".method",
|
|
318
|
+
"description": "HTTP Method used to send the files. Only POST and PUT are allowed.",
|
|
312
319
|
"value": {
|
|
313
320
|
"kind": "expression"
|
|
314
321
|
}
|
|
315
322
|
},
|
|
316
323
|
{
|
|
317
|
-
"name": ".
|
|
318
|
-
"description": "
|
|
324
|
+
"name": ".target",
|
|
325
|
+
"description": "The server URL. The default value is an empty string, which means that\n_window.location_ will be used.",
|
|
326
|
+
"value": {
|
|
327
|
+
"kind": "expression"
|
|
328
|
+
}
|
|
329
|
+
},
|
|
330
|
+
{
|
|
331
|
+
"name": ".timeout",
|
|
332
|
+
"description": "Max time in milliseconds for the entire upload process, if exceeded the\nrequest will be aborted. Zero means that there is no timeout.",
|
|
319
333
|
"value": {
|
|
320
334
|
"kind": "expression"
|
|
321
335
|
}
|
|
@@ -328,22 +342,22 @@
|
|
|
328
342
|
}
|
|
329
343
|
},
|
|
330
344
|
{
|
|
331
|
-
"name": "
|
|
332
|
-
"description": "
|
|
345
|
+
"name": "@file-reject",
|
|
346
|
+
"description": "Fired when a file cannot be added to the queue due to a constrain:\n file-size, file-type or maxFiles",
|
|
333
347
|
"value": {
|
|
334
348
|
"kind": "expression"
|
|
335
349
|
}
|
|
336
350
|
},
|
|
337
351
|
{
|
|
338
|
-
"name": "
|
|
339
|
-
"description": "
|
|
352
|
+
"name": "@files-changed",
|
|
353
|
+
"description": "Fired when the `files` property changes.",
|
|
340
354
|
"value": {
|
|
341
355
|
"kind": "expression"
|
|
342
356
|
}
|
|
343
357
|
},
|
|
344
358
|
{
|
|
345
|
-
"name": "@
|
|
346
|
-
"description": "Fired when
|
|
359
|
+
"name": "@max-files-reached-changed",
|
|
360
|
+
"description": "Fired when the `maxFilesReached` property changes.",
|
|
347
361
|
"value": {
|
|
348
362
|
"kind": "expression"
|
|
349
363
|
}
|
|
@@ -410,20 +424,6 @@
|
|
|
410
424
|
"value": {
|
|
411
425
|
"kind": "expression"
|
|
412
426
|
}
|
|
413
|
-
},
|
|
414
|
-
{
|
|
415
|
-
"name": "@files-changed",
|
|
416
|
-
"description": "Fired when the `files` property changes.",
|
|
417
|
-
"value": {
|
|
418
|
-
"kind": "expression"
|
|
419
|
-
}
|
|
420
|
-
},
|
|
421
|
-
{
|
|
422
|
-
"name": "@max-files-reached-changed",
|
|
423
|
-
"description": "Fired when the `maxFilesReached` property changes.",
|
|
424
|
-
"value": {
|
|
425
|
-
"kind": "expression"
|
|
426
|
-
}
|
|
427
427
|
}
|
|
428
428
|
]
|
|
429
429
|
}
|