@vaadin/upload
Version:
Web Component for uploading files with drag and drop support
175 lines (162 loc) • 6.39 kB
JavaScript
/**
* @license
* Copyright (c) 2016 - 2025 Vaadin Ltd.
* This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
*/
import '@vaadin/progress-bar/src/vaadin-progress-bar.js';
import './vaadin-upload-icons.js';
import { html, LitElement, nothing } from 'lit';
import { defineCustomElement } from '@vaadin/component-base/src/define.js';
import { PolylitMixin } from '@vaadin/component-base/src/polylit-mixin.js';
import { LumoInjectionMixin } from '@vaadin/vaadin-themable-mixin/lumo-injection-mixin.js';
import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
import { uploadFileStyles } from './styles/vaadin-upload-file-base-styles.js';
import { UploadFileMixin } from './vaadin-upload-file-mixin.js';
/**
* `<vaadin-upload-file>` element represents a file in the file list of `<vaadin-upload>`.
*
* ### Styling
*
* The following shadow DOM parts are available for styling:
*
* Part name | Description
* -----------------|-------------
* `done-icon` | File done status icon
* `warning-icon` | File warning status icon
* `meta` | Container for file name, status and error messages
* `name` | File name
* `error` | Error message, shown when error happens
* `status` | Status message
* `commands` | Container for file command buttons
* `start-button` | Start file upload button
* `retry-button` | Retry file upload button
* `remove-button` | Remove file button
*
* The following state attributes are available for styling:
*
* Attribute | Description
* -----------------|-------------
* `disabled` | Set when the element is disabled
* `focus-ring` | Set when the element is focused using the keyboard.
* `focused` | Set when the element is focused.
* `error` | An error has happened during uploading.
* `indeterminate` | Uploading is in progress, but the progress value is unknown.
* `uploading` | Uploading is in progress.
* `complete` | Uploading has finished successfully.
*
* The following custom CSS properties are available for styling:
*
* Custom CSS property |
* :--------------------------------------------|
* `--vaadin-upload-file-border-radius` |
* `--vaadin-upload-file-button-background` |
* `--vaadin-upload-file-button-border-color` |
* `--vaadin-upload-file-button-border-radius` |
* `--vaadin-upload-file-button-border-width` |
* `--vaadin-upload-file-button-text-color` |
* `--vaadin-upload-file-button-padding` |
* `--vaadin-upload-file-done-color` |
* `--vaadin-upload-file-error-color` |
* `--vaadin-upload-file-error-font-size` |
* `--vaadin-upload-file-error-font-weight` |
* `--vaadin-upload-file-error-line-height` |
* `--vaadin-upload-file-gap` |
* `--vaadin-upload-file-name-color` |
* `--vaadin-upload-file-name-font-size` |
* `--vaadin-upload-file-name-font-weight` |
* `--vaadin-upload-file-name-line-height` |
* `--vaadin-upload-file-padding` |
* `--vaadin-upload-file-status-color` |
* `--vaadin-upload-file-status-font-size` |
* `--vaadin-upload-file-status-font-weight` |
* `--vaadin-upload-file-status-line-height` |
* `--vaadin-upload-file-warning-color` |
*
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
*
* @customElement
* @extends HTMLElement
* @mixes UploadFileMixin
* @mixes ThemableMixin
*/
class UploadFile extends UploadFileMixin(ThemableMixin(PolylitMixin(LumoInjectionMixin(LitElement)))) {
static get is() {
return 'vaadin-upload-file';
}
static get styles() {
return uploadFileStyles;
}
static get lumoInjector() {
return { ...super.lumoInjector, includeBaseStyles: true };
}
/** @protected */
render() {
return html`
<div part="done-icon" ?hidden="${!this.complete}" aria-hidden="true"></div>
<div part="warning-icon" ?hidden="${!this.errorMessage}" aria-hidden="true"></div>
<div part="meta">
<div part="name" id="name">${this.fileName}</div>
<div part="status" ?hidden="${!this.status}" id="status">${this.status}</div>
<div part="error" id="error" ?hidden="${!this.errorMessage}">${this.errorMessage}</div>
</div>
<div part="commands">
<button
type="button"
part="start-button"
file-event="file-start"
@click="${this._fireFileEvent}"
?hidden="${!this.held}"
?disabled="${this.disabled}"
aria-label="${this.i18n ? this.i18n.file.start : nothing}"
aria-describedby="name"
></button>
<button
type="button"
part="retry-button"
file-event="file-retry"
@click="${this._fireFileEvent}"
?hidden="${!this.errorMessage}"
?disabled="${this.disabled}"
aria-label="${this.i18n ? this.i18n.file.retry : nothing}"
aria-describedby="name"
></button>
<button
type="button"
part="remove-button"
file-event="file-abort"
@click="${this._fireFileEvent}"
?disabled="${this.disabled}"
aria-label="${this.i18n ? this.i18n.file.remove : nothing}"
aria-describedby="name"
></button>
</div>
<slot name="progress"></slot>
`;
}
/**
* Fired when the retry button is pressed. It is listened by `vaadin-upload`
* which will start a new upload process of this file.
*
* @event file-retry
* @param {Object} detail
* @param {Object} detail.file file to retry upload of
*/
/**
* Fired when the start button is pressed. It is listened by `vaadin-upload`
* which will start a new upload process of this file.
*
* @event file-start
* @param {Object} detail
* @param {Object} detail.file file to start upload of
*/
/**
* Fired when abort button is pressed. It is listened by `vaadin-upload` which
* will abort the upload in progress, and then remove the file from the list.
*
* @event file-abort
* @param {Object} detail
* @param {Object} detail.file file to abort upload of
*/
}
defineCustomElement(UploadFile);
export { UploadFile };