fix(core/upload): drop while loading and input width (#655)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

packages/core/src/components/upload/upload.scss

@@ -53,7 +53,7 @@
       }
     }
 
-    &.file-over {
+    &:not(.disabled).file-over {
       border-color: var(--theme-upload--border-color--dragover);
       border-style: solid;
     }
@@ -73,10 +73,14 @@
     }
 
     .upload-browser {
-      opacity: 0;
+      border: 0;
+      clip: rect(0 0 0 0);
+      height: 1px;
+      margin: -1px;
       overflow: hidden;
+      padding: 0;
       position: absolute;
-      z-index: -1;
+      width: 1px;
     }
 
     .loader {

packages/core/src/components/upload/upload.tsx

@@ -111,8 +111,10 @@ export class Upload {
   }
 
   private fileOver(event: DragEvent) {
-    event.preventDefault();
-    event.dataTransfer.dropEffect = 'move';
+    if (this.state !== UploadFileState.LOADING) {
+      event.preventDefault();
+      event.dataTransfer.dropEffect = 'move';
+    }
 
     if (!this.multiple && event.dataTransfer.items.length > 1) {
       event.preventDefault();
@@ -206,12 +208,17 @@ export class Upload {
         <div
           class={{
             'file-upload-area': true,
-            'file-over': this.isFileOver,
+            'file-over':
+              this.state !== UploadFileState.LOADING && this.isFileOver,
             checking: this.state === UploadFileState.LOADING,
             disabled: this.disabled,
             multiline: this.multiline,
           }}
-          onDrop={(e) => this.fileDropped(e)}
+          onDrop={(e) => {
+            if (this.state !== UploadFileState.LOADING) {
+              this.fileDropped(e);
+            }
+          }}
           onDragOver={(e) => this.fileOver(e)}
           onDragLeave={() => this.fileLeave()}
           draggable={!this.disabled}