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; + } } }