103 lines
2.2 KiB
JavaScript
103 lines
2.2 KiB
JavaScript
/**
|
|
@license
|
|
Copyright (c) 2022 trading_peter
|
|
This program is available under Apache License Version 2.0
|
|
*/
|
|
|
|
import { dropzoneMixin } from './dropzone-mixin';
|
|
import { upload } from '@tp/helpers/upload-files.js';
|
|
import { LitElement, html, css } from 'lit';
|
|
|
|
class TpDropzone extends upload(dropzoneMixin(LitElement)) {
|
|
static get styles() {
|
|
return [
|
|
css`
|
|
:host {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
border: dashed 2px #000000;
|
|
padding: 20px;
|
|
text-align: center;
|
|
}
|
|
|
|
:host([isdraggedon]) {
|
|
color: #ffffff;
|
|
border: dashed 2px #000000;
|
|
}
|
|
|
|
input[type="file"] {
|
|
display: none;
|
|
}
|
|
`
|
|
];
|
|
}
|
|
|
|
render() {
|
|
return html`
|
|
<slot></slot>
|
|
<input type="file" @change=${this._handleFileSelect}>
|
|
`;
|
|
}
|
|
|
|
static get properties() {
|
|
return {
|
|
url: { type: String },
|
|
isDraggedOn: { type: Boolean, reflect: true },
|
|
file: { type: Object, state: true }
|
|
};
|
|
}
|
|
|
|
constructor() {
|
|
super();
|
|
this.file = null;
|
|
}
|
|
|
|
firstUpdated() {
|
|
super.firstUpdated();
|
|
this._fileInput = this.shadowRoot.querySelector('input[type="file"]');
|
|
this.addEventListener('click', this._handleClick);
|
|
}
|
|
|
|
disconnectedCallback() {
|
|
super.disconnectedCallback();
|
|
this.removeEventListener('click', this._handleClick);
|
|
}
|
|
|
|
_handleClick(e) {
|
|
this._fileInput.click();
|
|
}
|
|
|
|
_handleFileSelect(e) {
|
|
const file = e.target.files[0];
|
|
if (file) {
|
|
this.file = file;
|
|
this.dispatchEvent(new CustomEvent('file-selected', {
|
|
detail: { file: this.file },
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
// Reset the input so the same file can be selected again
|
|
e.target.value = '';
|
|
}
|
|
}
|
|
|
|
async upload() {
|
|
if (this.file) {
|
|
const params = { url: this.url, data: null };
|
|
document.dispatchEvent(new CustomEvent('before-upload', {
|
|
detail: params,
|
|
bubbles: true,
|
|
composed: true
|
|
}));
|
|
|
|
await this.uploadFiles(params.url, [this.file], params.data);
|
|
|
|
// Clear file after successful upload
|
|
this.file = null;
|
|
}
|
|
}
|
|
}
|
|
|
|
window.customElements.define('tp-dropzone', TpDropzone);
|