fix(core): update

ts_web/elements/dees-input-fileupload.ts

@@ -48,12 +48,17 @@ export class DeesInputFileupload extends DeesElement {
   public required: boolean = false;
 
   @property({
-    type: Boolean
+    type: Boolean,
   })
   public disabled: boolean = false;
 
+  @property({
+    type: String,
+  })
+  public buttonText: string = 'Upload File...';
+
   constructor() {
-    super()
+    super();
   }
 
   public static styles = [
@@ -78,27 +83,38 @@ export class DeesInputFileupload extends DeesElement {
       .uploadButton {
         position: relative;
         cursor: pointer;
-        padding: 20px 20px;
-        max-width: 200px;
+        padding: 8px;
+        max-width: 600px;
         background: ${cssManager.bdTheme('#fafafa', '#333333')};
         border-radius: 3px;
         text-align: center;
       }
       .uploadButton::after {
-        top: 7px;
-        right: 7px;
-        left: 7px;
-        bottom: 7px;
-        transform: scale3d(0.9, 0.9, 1);
+        top: 2px;
+        right: 2px;
+        left: 2px;
+        bottom: 2px;
+        transform: scale3d(0.98, 0.9, 1);
         position: absolute;
         content: '';
         display: block;
-        border: 4px dashed rgba(255, 255, 255, 0);
+        border: 2px dashed rgba(255, 255, 255, 0);
         transition: all 0.2s;
       }
       .uploadButton.dragOver::after {
         transform: scale3d(1, 1, 1);
-        border: 4px dashed rgba(255, 255, 255, 0.3);
+        border: 2px dashed rgba(255, 255, 255, 0.3);
+      }
+
+      .uploadCandidate {
+        text-align: left;
+        border-bottom: 1px dashed #444;
+        color: #fff;
+        padding: 8px;
+        font-family: 'Roboto Mono';
+      }
+      .uploadCandidate:last-child {
+        margin-bottom: 8px;
       }
     `,
   ];
@@ -107,7 +123,10 @@ export class DeesInputFileupload extends DeesElement {
     return html`
       <div class="maincontainer">
         ${this.label ? html`<div class="label">${this.label}</div>` : null}
-        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">Upload File! (Drag/Drop enabled)</div>
+        <div class="uploadButton ${this.state === 'dragOver' ? 'dragOver' : ''}">
+          ${this.value.map((fileArg) => html` <div class="uploadCandidate">${fileArg.name} | ${fileArg.size}</div> `)}
+          ${this.buttonText}
+        </div>
       </div>
     `;
   }
@@ -122,18 +141,24 @@ export class DeesInputFileupload extends DeesElement {
     const dropArea = this.shadowRoot.querySelector('.uploadButton');
     const handlerFunction = (eventArg: DragEvent) => {
       eventArg.preventDefault();
-      switch(eventArg.type) {
+      switch (eventArg.type) {
         case 'dragover':
           this.state = 'dragOver';
+          this.buttonText = 'release to upload file...';
           break;
         case 'dragleave':
           this.state = 'idle';
+          this.buttonText = 'Upload File...';
           break;
+        case 'drop':
+          this.state = 'idle';
+          this.buttonText = 'Upload more files...';
       }
       console.log(eventArg);
       for (const file of Array.from(eventArg.dataTransfer.files)) {
         this.value.push(file);
-      };
+        this.requestUpdate();
+      }
       console.log(`Got ${this.value.length} files!`);
     };
     dropArea.addEventListener('dragenter', handlerFunction, false);