Initial implementation

2024-10-21 23:29:10 +02:00
parent 24dd530db8
commit a6b62fcd46
6 changed files with 247 additions and 40 deletions
@@ -0,0 +1,59 @@
+/**
+@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);