diff --git a/package.json b/package.json
index f14e48a..388cb43 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@tp/tp-dropzone",
- "version": "1.0.0",
+ "version": "2.0.0",
"description": "",
"main": "tp-dropzone.js",
"scripts": {
diff --git a/tp-dropzone.js b/tp-dropzone.js
index 5368712..33ec628 100644
--- a/tp-dropzone.js
+++ b/tp-dropzone.js
@@ -25,6 +25,10 @@ class TpDropzone extends upload(dropzoneMixin(LitElement)) {
color: #ffffff;
border: dashed 2px #000000;
}
+
+ input[type="file"] {
+ display: none;
+ }
`
];
}
@@ -32,6 +36,7 @@ class TpDropzone extends upload(dropzoneMixin(LitElement)) {
render() {
return html`
+
`;
}
@@ -39,20 +44,58 @@ class TpDropzone extends upload(dropzoneMixin(LitElement)) {
return {
url: { type: String },
isDraggedOn: { type: Boolean, reflect: true },
+ file: { type: Object, state: 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);
+ 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 = '';
}
}
- _upload(dt) {
- return this.upload(dt);
+ 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;
+ }
}
}