60 lines
1.3 KiB
JavaScript
60 lines
1.3 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;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
];
|
||
|
|
}
|
||
|
|
|
||
|
|
render() {
|
||
|
|
return html`
|
||
|
|
<slot></slot>
|
||
|
|
`;
|
||
|
|
}
|
||
|
|
|
||
|
|
static get properties() {
|
||
|
|
return {
|
||
|
|
url: { type: String },
|
||
|
|
isDraggedOn: { type: Boolean, reflect: true },
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
async upload(dt) {
|
||
|
|
let files = dt.files;
|
||
|
|
if (files.length > 0) {
|
||
|
|
const params = { url: this.url, data: null };
|
||
|
|
document.dispatchEvent(new CustomEvent('before-upload', { detail: params, bubbles: true, composed: true }));
|
||
|
|
this.uploadFiles(params.url, files, params.data);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
_upload(dt) {
|
||
|
|
return this.upload(dt);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
window.customElements.define('tp-dropzone', TpDropzone);
|