display the upload box for further uploads

Author: clouless

src/app/services/backend.service.ts

@@ -64,6 +64,9 @@ export class BackendService {
       const kartoffelstampfTerminalOutputEntry: KartoffelstampfTerminalOutputEntry = JSON.parse(event.data);
       subject.next(kartoffelstampfTerminalOutputEntry);
     };
+    ws.onerror = function (event) {
+      console.log('websocket onerror', event);
+    };
     ws.onclose = function (event) {
       subject.complete();
     };

src/app/upload-page/upload-page.component.html

@@ -5,7 +5,6 @@
     [isActive]="activeStep == 1"
   ></app-numbered-headline>
   <div
-    *ngIf="activeStep == 1"
     class="drop-container"
     [class.drop-container---drag-over]="uiStateDragOver"
     [class.drop-container---drag-leave]="uiStateDragLeave"

src/app/upload-page/upload-page.component.ts

@@ -18,6 +18,7 @@ import { HttpErrorResponse } from '@angular/common/http';
       display:flex;
       justify-content: center;
       align-items: center;
+      transition: border-color 0.5s linear;
     }`,
     `.drop-container---drag-over { border-color: #0DFF0D; }`,
     `.drop-container---drag-leave { border-color: #ccc; }`,
@@ -70,12 +71,17 @@ export class UploadPageComponent implements OnInit, OnDestroy {
   }
 
   handleDrop(event: any) {
-    this.uiStateDragOver = false;
-    this.uiStateDragLeave = false;
-    this.uiStateDrop = true;
+    const self = this;
+    self.uiStateDragOver = false;
+    self.uiStateDragLeave = false;
+    self.uiStateDrop = true;
+    setTimeout(() => {
+      self.uiStateDrop = false;
+      self.uiStateDragLeave = true;
+    }, 400);
     event.stopPropagation();
     event.preventDefault();
-    this.processFileToBase64DataURI(<FileList>event.dataTransfer.files);
+    self.processFileToBase64DataURI(<FileList>event.dataTransfer.files);
   }
 
   handleDragOver(event: Event) {