Allow to upload by selecting a file in the file dialog. Api changes.

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tp/tp-dropzone",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "",
   "main": "tp-dropzone.js",
   "scripts": {

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`
       <slot></slot>
+      <input type="file" @change=${this._handleFileSelect}>
     `;
   }
 
@@ -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) {
+  constructor() {
-    let files = dt.files;
+    super();
-    if (files.length > 0) {
+    this.file = null;
-      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);
+  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) {
+  async upload() {
-    return this.upload(dt);
+    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;
+    }
   }
 }