314 lines
9.1 KiB
TypeScript
314 lines
9.1 KiB
TypeScript
import "@material/mwc-linear-progress/mwc-linear-progress";
|
|
import { mdiDelete, mdiFileUpload } from "@mdi/js";
|
|
import { LitElement, PropertyValues, TemplateResult, css, html } from "lit";
|
|
import { customElement, property, query, state } from "lit/decorators";
|
|
import { classMap } from "lit/directives/class-map";
|
|
import { fireEvent } from "../common/dom/fire_event";
|
|
import { HomeAssistant } from "../types";
|
|
import "./ha-button";
|
|
import "./ha-icon-button";
|
|
import { blankBeforePercent } from "../common/translations/blank_before_percent";
|
|
import { ensureArray } from "../common/array/ensure-array";
|
|
import { bytesToString } from "../util/bytes-to-string";
|
|
|
|
declare global {
|
|
interface HASSDomEvents {
|
|
"file-picked": { files: File[] };
|
|
}
|
|
}
|
|
|
|
@customElement("ha-file-upload")
|
|
export class HaFileUpload extends LitElement {
|
|
@property({ attribute: false }) public hass?: HomeAssistant;
|
|
|
|
@property() public accept!: string;
|
|
|
|
@property() public icon?: string;
|
|
|
|
@property() public label?: string;
|
|
|
|
@property() public secondary?: string;
|
|
|
|
@property() public supports?: string;
|
|
|
|
@property() public value?: File | File[] | FileList | string;
|
|
|
|
@property({ type: Boolean }) private multiple = false;
|
|
|
|
@property({ type: Boolean, reflect: true }) public disabled: boolean = false;
|
|
|
|
@property({ type: Boolean }) private uploading = false;
|
|
|
|
@property({ type: Number }) private progress?: number;
|
|
|
|
@property({ type: Boolean, attribute: "auto-open-file-dialog" })
|
|
private autoOpenFileDialog = false;
|
|
|
|
@state() private _drag = false;
|
|
|
|
@query("#input") private _input?: HTMLInputElement;
|
|
|
|
protected firstUpdated(changedProperties: PropertyValues) {
|
|
super.firstUpdated(changedProperties);
|
|
if (this.autoOpenFileDialog) {
|
|
this._openFilePicker();
|
|
}
|
|
}
|
|
|
|
public render(): TemplateResult {
|
|
return html`
|
|
${this.uploading
|
|
? html`<div class="container">
|
|
<div class="row">
|
|
<span class="header"
|
|
>${this.value
|
|
? this.hass?.localize(
|
|
"ui.components.file-upload.uploading_name",
|
|
{ name: this.value }
|
|
)
|
|
: this.hass?.localize(
|
|
"ui.components.file-upload.uploading"
|
|
)}</span
|
|
>
|
|
${this.progress
|
|
? html`<span class="progress"
|
|
>${this.progress}${blankBeforePercent(
|
|
this.hass!.locale
|
|
)}%</span
|
|
>`
|
|
: ""}
|
|
</div>
|
|
<mwc-linear-progress
|
|
.indeterminate=${!this.progress}
|
|
.progress=${this.progress ? this.progress / 100 : undefined}
|
|
></mwc-linear-progress>
|
|
</div>`
|
|
: html`<label
|
|
for=${this.value ? "" : "input"}
|
|
class="container ${classMap({
|
|
dragged: this._drag,
|
|
multiple: this.multiple,
|
|
value: Boolean(this.value),
|
|
})}"
|
|
@drop=${this._handleDrop}
|
|
@dragenter=${this._handleDragStart}
|
|
@dragover=${this._handleDragStart}
|
|
@dragleave=${this._handleDragEnd}
|
|
@dragend=${this._handleDragEnd}
|
|
>${!this.value
|
|
? html`<ha-svg-icon
|
|
class="big-icon"
|
|
.path=${this.icon || mdiFileUpload}
|
|
></ha-svg-icon>
|
|
<ha-button unelevated @click=${this._openFilePicker}>
|
|
${this.label ||
|
|
this.hass?.localize("ui.components.file-upload.label")}
|
|
</ha-button>
|
|
<span class="secondary"
|
|
>${this.secondary ||
|
|
this.hass?.localize(
|
|
"ui.components.file-upload.secondary"
|
|
)}</span
|
|
>
|
|
<span class="supports">${this.supports}</span>`
|
|
: typeof this.value === "string"
|
|
? html`<div class="row">
|
|
<div class="value" @click=${this._openFilePicker}>
|
|
<ha-svg-icon
|
|
.path=${this.icon || mdiFileUpload}
|
|
></ha-svg-icon>
|
|
${this.value}
|
|
</div>
|
|
<ha-icon-button
|
|
@click=${this._clearValue}
|
|
.label=${this.hass?.localize("ui.common.delete") ||
|
|
"Delete"}
|
|
.path=${mdiDelete}
|
|
></ha-icon-button>
|
|
</div>`
|
|
: (this.value instanceof FileList
|
|
? Array.from(this.value)
|
|
: ensureArray(this.value)
|
|
).map(
|
|
(file) =>
|
|
html`<div class="row">
|
|
<div class="value" @click=${this._openFilePicker}>
|
|
<ha-svg-icon
|
|
.path=${this.icon || mdiFileUpload}
|
|
></ha-svg-icon>
|
|
${file.name} - ${bytesToString(file.size)}
|
|
</div>
|
|
<ha-icon-button
|
|
@click=${this._clearValue}
|
|
.label=${this.hass?.localize("ui.common.delete") ||
|
|
"Delete"}
|
|
.path=${mdiDelete}
|
|
></ha-icon-button>
|
|
</div>`
|
|
)}
|
|
<input
|
|
id="input"
|
|
type="file"
|
|
class="file"
|
|
.accept=${this.accept}
|
|
.multiple=${this.multiple}
|
|
@change=${this._handleFilePicked}
|
|
/></label>`}
|
|
`;
|
|
}
|
|
|
|
private _openFilePicker() {
|
|
this._input?.click();
|
|
}
|
|
|
|
private _handleDrop(ev: DragEvent) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
if (ev.dataTransfer?.files) {
|
|
fireEvent(this, "file-picked", {
|
|
files:
|
|
this.multiple || ev.dataTransfer.files.length === 1
|
|
? Array.from(ev.dataTransfer.files)
|
|
: [ev.dataTransfer.files[0]],
|
|
});
|
|
}
|
|
this._drag = false;
|
|
}
|
|
|
|
private _handleDragStart(ev: DragEvent) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
this._drag = true;
|
|
}
|
|
|
|
private _handleDragEnd(ev: DragEvent) {
|
|
ev.preventDefault();
|
|
ev.stopPropagation();
|
|
this._drag = false;
|
|
}
|
|
|
|
private _handleFilePicked(ev) {
|
|
if (ev.target.files.length === 0) {
|
|
return;
|
|
}
|
|
this.value = ev.target.files;
|
|
fireEvent(this, "file-picked", { files: ev.target.files });
|
|
}
|
|
|
|
private _clearValue(ev: Event) {
|
|
ev.preventDefault();
|
|
this._input!.value = "";
|
|
this.value = undefined;
|
|
fireEvent(this, "change");
|
|
}
|
|
|
|
static get styles() {
|
|
return css`
|
|
:host {
|
|
display: block;
|
|
height: 240px;
|
|
}
|
|
:host([disabled]) {
|
|
pointer-events: none;
|
|
color: var(--disabled-text-color);
|
|
}
|
|
.container {
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: solid 1px
|
|
var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
|
|
border-radius: var(--mdc-shape-small, 4px);
|
|
height: 100%;
|
|
}
|
|
label.container {
|
|
border: dashed 1px
|
|
var(--mdc-text-field-idle-line-color, rgba(0, 0, 0, 0.42));
|
|
cursor: pointer;
|
|
}
|
|
:host([disabled]) .container {
|
|
border-color: var(--disabled-color);
|
|
}
|
|
label.dragged {
|
|
border-color: var(--primary-color);
|
|
}
|
|
.dragged:before {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
background-color: var(--primary-color);
|
|
content: "";
|
|
opacity: var(--dark-divider-opacity);
|
|
pointer-events: none;
|
|
border-radius: var(--mdc-shape-small, 4px);
|
|
}
|
|
label.value {
|
|
cursor: default;
|
|
}
|
|
label.value.multiple {
|
|
justify-content: unset;
|
|
overflow: auto;
|
|
}
|
|
.highlight {
|
|
color: var(--primary-color);
|
|
}
|
|
.row {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 0 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
ha-button {
|
|
margin-bottom: 4px;
|
|
}
|
|
.supports {
|
|
color: var(--secondary-text-color);
|
|
font-size: 12px;
|
|
}
|
|
:host([disabled]) .secondary {
|
|
color: var(--disabled-text-color);
|
|
}
|
|
input.file {
|
|
display: none;
|
|
}
|
|
.value {
|
|
cursor: pointer;
|
|
}
|
|
.value ha-svg-icon {
|
|
margin-right: 8px;
|
|
}
|
|
.big-icon {
|
|
--mdc-icon-size: 48px;
|
|
margin-bottom: 8px;
|
|
}
|
|
ha-button {
|
|
--mdc-button-outline-color: var(--primary-color);
|
|
--mdc-icon-button-size: 24px;
|
|
}
|
|
mwc-linear-progress {
|
|
width: 100%;
|
|
padding: 16px;
|
|
box-sizing: border-box;
|
|
}
|
|
.header {
|
|
font-weight: 500;
|
|
}
|
|
.progress {
|
|
color: var(--secondary-text-color);
|
|
}
|
|
`;
|
|
}
|
|
}
|
|
|
|
declare global {
|
|
interface HTMLElementTagNameMap {
|
|
"ha-file-upload": HaFileUpload;
|
|
}
|
|
}
|