package.web-types.json Maven / Gradle / Ivy
Go to download
Show more of this group Show more artifacts with this name
Show all versions of upload Show documentation
Show all versions of upload Show documentation
Web Component for uploading files with drag and drop support
{
"$schema": "https://json.schemastore.org/web-types",
"name": "@vaadin/upload",
"version": "24.4.11",
"description-markup": "markdown",
"contributions": {
"html": {
"elements": [
{
"name": "vaadin-upload-file",
"description": "`` element represents a file in the file list of ``.\n\n### Styling\n\nThe following shadow DOM parts are available for styling:\n\nPart name | Description\n-----------------|-------------\n`row` | File container\n`info` | Container for file status icon, file name, status and error messages\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`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\nSee [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.",
"attributes": [
{
"name": "complete",
"description": "True if uploading is completed, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "error-message",
"description": "Error message returned by the server, if any.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "file-name",
"description": "Name of the uploading file.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "held",
"description": "True if uploading is not started, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "indeterminate",
"description": "True if remaining time is unknown, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "progress",
"description": "Number representing the uploading progress.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "status",
"description": "Uploading status.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "uploading",
"description": "True if uploading is in progress, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "theme",
"description": "The theme variants to apply to the component.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
}
],
"js": {
"properties": [
{
"name": "complete",
"description": "True if uploading is completed, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "errorMessage",
"description": "Error message returned by the server, if any.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "file",
"description": "The object representing a file.",
"value": {
"type": [
"Object",
"null",
"undefined"
]
}
},
{
"name": "fileName",
"description": "Name of the uploading file.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "held",
"description": "True if uploading is not started, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "indeterminate",
"description": "True if remaining time is unknown, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
},
{
"name": "i18n",
"description": "The object used to localize this component.",
"value": {
"type": [
"Object",
"null",
"undefined"
]
}
},
{
"name": "progress",
"description": "Number representing the uploading progress.",
"value": {
"type": [
"number",
"null",
"undefined"
]
}
},
{
"name": "status",
"description": "Uploading status.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "uploading",
"description": "True if uploading is in progress, false otherwise.",
"value": {
"type": [
"boolean",
"null",
"undefined"
]
}
}
],
"events": [
{
"name": "file-abort",
"description": "Fired when abort button is pressed. It is listened by `vaadin-upload` which\nwill abort the upload in progress, and then remove the file from the list."
},
{
"name": "file-retry",
"description": "Fired when the retry button is pressed. It is listened by `vaadin-upload`\nwhich will start a new upload process of this file."
},
{
"name": "file-start",
"description": "Fired when the start button is pressed. It is listened by `vaadin-upload`\nwhich will start a new upload process of this file."
}
]
}
},
{
"name": "vaadin-upload",
"description": "`` is a Web Component for uploading multiple files with drag and drop support.\n\nExample:\n\n```\n"
]
}
},
{
"name": "maxFiles",
"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.",
"value": {
"type": [
"number"
]
}
},
{
"name": "accept",
"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\"",
"value": {
"type": [
"string"
]
}
},
{
"name": "maxFileSize",
"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.",
"value": {
"type": [
"number"
]
}
},
{
"name": "formDataName",
"description": "Specifies the 'name' property at Content-Disposition",
"value": {
"type": [
"string"
]
}
},
{
"name": "noAuto",
"description": "Prevents upload(s) from immediately uploading upon adding file(s).\nWhen set, you must manually trigger uploads using the `uploadFiles` method",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "withCredentials",
"description": "Set the withCredentials flag on the request.",
"value": {
"type": [
"boolean"
]
}
},
{
"name": "capture",
"description": "Pass-through to input's capture attribute. Allows user to trigger device inputs\nsuch as camera or microphone immediately.",
"value": {
"type": [
"string",
"null",
"undefined"
]
}
},
{
"name": "i18n",
"description": "The object used to localize this component.\nFor changing the default localization, change the entire\n_i18n_ object or just the property you want to modify.\n\nThe object has the following JSON structure and default values:\n\n```\n{\n dropFiles: {\n one: 'Drop file here',\n many: 'Drop files here'\n },\n addFiles: {\n one: 'Select 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: 'Server Unavailable',\n unexpectedServerError: 'Unexpected Server Error',\n forbidden: '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```",
"value": {
"type": [
"UploadI18n"
]
}
}
],
"events": [
{
"name": "file-reject",
"description": "Fired when a file cannot be added to the queue due to a constrain:\n file-size, file-type or maxFiles"
},
{
"name": "upload-abort",
"description": "Fired when retry abort is requested. If the default is prevented, then the\nfile upload would not be aborted."
},
{
"name": "upload-before",
"description": "Fired before the XHR is opened. Could be used for changing the request\nURL. If the default is prevented, then XHR would not be opened."
},
{
"name": "upload-error",
"description": "Fired in case the upload process failed."
},
{
"name": "upload-progress",
"description": "Fired as many times as the progress is updated."
},
{
"name": "upload-request",
"description": "Fired when the XHR has been opened but not sent yet. Useful for appending\ndata keys to the FormData object, for changing some parameters like\nheaders, etc. If the event is defaultPrevented, `vaadin-upload` will not\nsend the request allowing the user to do something on his own."
},
{
"name": "upload-response",
"description": "Fired when we have the actual server response, and before the component\nanalyses it. It's useful for developers to make the upload fail depending\non the server response. If the event is defaultPrevented the vaadin-upload\nwill return allowing the user to do something on his own like retry the\nupload, etc. since he has full access to the `xhr` and `file` objects.\nOtherwise, if the event is not prevented default `vaadin-upload` continues\nwith the normal workflow checking the `xhr.status` and `file.error`\nwhich also might be modified by the user to force a customized response."
},
{
"name": "upload-retry",
"description": "Fired when retry upload is requested. If the default is prevented, then\nretry would not be performed."
},
{
"name": "upload-start",
"description": "Fired when the XHR is sent."
},
{
"name": "upload-success",
"description": "Fired in case the upload process succeed."
},
{
"name": "files-changed",
"description": "Fired when the `files` property changes."
},
{
"name": "max-files-reached-changed",
"description": "Fired when the `maxFilesReached` property changes."
}
]
}
}
]
}
}
}