From 1a3779bc62ca92cb1f9355bb70e1d2a2a537fb27 Mon Sep 17 00:00:00 2001
From: Timo <timo@devplant.ro>
Date: Tue, 15 Dec 2020 19:21:22 +0200
Subject: [PATCH] file drop rework

---
 .../project-overview-screen.component.ts      | 28 +++++++-------
 .../upload/file-drop/file-drop.component.html |  8 ++--
 .../upload/file-drop/file-drop.component.scss | 15 +++++---
 .../upload/file-drop/file-drop.component.ts   | 32 ++++++++--------
 apps/red-ui/src/app/utils/file-drop-utils.ts  | 37 +++++++++++++++++++
 apps/red-ui/src/assets/i18n/en.json           |  2 +-
 6 files changed, 83 insertions(+), 39 deletions(-)
 create mode 100644 apps/red-ui/src/app/utils/file-drop-utils.ts

diff --git a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
index d1e5298be..fbada9f2a 100644
--- a/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
+++ b/apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnDestroy, OnInit, ViewChild } from '@angular/core';
+import { ChangeDetectorRef, Component, HostListener, OnDestroy, OnInit, ViewChild } from '@angular/core';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NotificationService } from '../../notification/notification.service';
 import { AppStateService } from '../../state/app-state.service';
@@ -26,6 +26,7 @@ import { StatusSorter } from '../../common/sorters/status-sorter';
 import { FormBuilder, FormGroup } from '@angular/forms';
 import { debounce } from '../../utils/debounce';
 import { download } from '../../utils/file-download-utils';
+import { handleFileDrop } from '../../utils/file-drop-utils';
 
 @Component({
     selector: 'redaction-project-overview-screen',
@@ -182,20 +183,19 @@ export class ProjectOverviewScreenComponent implements OnInit, OnDestroy {
         return item.fileId;
     }
 
-    uploadFiles(files: FileList | File[]) {
-        const uploadFiles: FileUploadModel[] = [];
-        for (let i = 0; i < files.length; i++) {
-            const file = files[i];
-            uploadFiles.push({
-                file: file,
-                progress: 0,
-                completed: false,
-                error: null,
-                retryCount: 0
-            });
-        }
+    @HostListener('drop', ['$event'])
+    onDrop(event: DragEvent) {
+        handleFileDrop(event, this.uploadFiles.bind(this));
+    }
 
-        this._fileUploadService.uploadFiles(uploadFiles);
+    @HostListener('dragover', ['$event'])
+    onDragOver(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    uploadFiles(files: FileUploadModel[]) {
+        this._fileUploadService.uploadFiles(files);
         this._uploadStatusOverlayService.openStatusOverlay();
         this._changeDetectorRef.detectChanges();
     }
diff --git a/apps/red-ui/src/app/upload/file-drop/file-drop.component.html b/apps/red-ui/src/app/upload/file-drop/file-drop.component.html
index 314216e94..90505d92b 100644
--- a/apps/red-ui/src/app/upload/file-drop/file-drop.component.html
+++ b/apps/red-ui/src/app/upload/file-drop/file-drop.component.html
@@ -1,8 +1,8 @@
 <section (mouseout)="close()">
-    <ngx-dropzone (change)="handleFileInput($event.addedFiles)" class="file-drop-zone">
-        <ngx-dropzone-label>{{ 'project-overview.upload-files' | translate }}</ngx-dropzone-label>
-    </ngx-dropzone>
-    <input type="file" multiple hidden accept="application/pdf" />
+    <mat-icon svgIcon="red:upload" class="upload-icon"></mat-icon>
+    <div class="heading-xl">
+        {{ 'project-overview.upload-files' | translate }}
+    </div>
 
     <button (click)="close()" class="close-icon" mat-icon-button>
         <mat-icon svgIcon="red:close"></mat-icon>
diff --git a/apps/red-ui/src/app/upload/file-drop/file-drop.component.scss b/apps/red-ui/src/app/upload/file-drop/file-drop.component.scss
index b2942716c..9114e386b 100644
--- a/apps/red-ui/src/app/upload/file-drop/file-drop.component.scss
+++ b/apps/red-ui/src/app/upload/file-drop/file-drop.component.scss
@@ -8,13 +8,18 @@ section {
     height: 100vh;
     z-index: 1000;
     padding: 12px;
+    opacity: 0.7;
     background: white;
-}
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    flex-direction: column;
 
-.file-drop-zone {
-    background: white;
-    height: calc(100% - 26px);
-    width: calc(100% - 26px);
+    .upload-icon {
+        width: 34px;
+        height: 34px;
+        margin-bottom: 10px;
+    }
 }
 
 .close-icon {
diff --git a/apps/red-ui/src/app/upload/file-drop/file-drop.component.ts b/apps/red-ui/src/app/upload/file-drop/file-drop.component.ts
index e16a99dd5..d424e5de1 100644
--- a/apps/red-ui/src/app/upload/file-drop/file-drop.component.ts
+++ b/apps/red-ui/src/app/upload/file-drop/file-drop.component.ts
@@ -3,6 +3,7 @@ import { FileUploadService } from '../file-upload.service';
 import { FileUploadModel } from '../model/file-upload.model';
 import { OverlayRef } from '@angular/cdk/overlay';
 import { UploadStatusOverlayService } from '../upload-status-dialog/service/upload-status-overlay.service';
+import { handleFileDrop } from '../../utils/file-drop-utils';
 
 @Component({
     selector: 'redaction-file-drop',
@@ -20,28 +21,29 @@ export class FileDropComponent implements OnInit {
     ngOnInit() {}
 
     close() {
-        this._dialogRef.detach();
+        setTimeout(() => {
+            this._dialogRef.detach();
+        }, 150);
     }
 
     @HostListener('document:keydown.escape', ['$event'])
-    onKeydownHandler(evt: KeyboardEvent) {
+    onKeydownHandler() {
         this.close();
     }
 
-    handleFileInput(files: FileList | File[]) {
-        const uploadFiles: FileUploadModel[] = [];
-        for (let i = 0; i < files.length; i++) {
-            const file = files[i];
-            uploadFiles.push({
-                file: file,
-                progress: 0,
-                completed: false,
-                error: null,
-                retryCount: 0
-            });
-        }
+    @HostListener('drop', ['$event'])
+    onDrop(event: DragEvent) {
+        handleFileDrop(event, this.uploadFiles.bind(this));
+    }
 
-        this._fileUploadService.uploadFiles(uploadFiles);
+    @HostListener('dragover', ['$event'])
+    onDragOver(event) {
+        event.stopPropagation();
+        event.preventDefault();
+    }
+
+    uploadFiles(files: FileUploadModel[]) {
+        this._fileUploadService.uploadFiles(files);
         this._uploadStatusOverlayService.openStatusOverlay();
         this._dialogRef.detach();
         this._changeDetectorRef.detectChanges();
diff --git a/apps/red-ui/src/app/utils/file-drop-utils.ts b/apps/red-ui/src/app/utils/file-drop-utils.ts
new file mode 100644
index 000000000..fa6b16a13
--- /dev/null
+++ b/apps/red-ui/src/app/utils/file-drop-utils.ts
@@ -0,0 +1,37 @@
+import { FileUploadModel } from '../upload/model/file-upload.model';
+
+export function handleFileDrop(event: DragEvent, uploadFiles: (files: FileUploadModel[]) => void) {
+    event.preventDefault();
+    event.stopPropagation();
+    const { dataTransfer } = event;
+    if (dataTransfer.items) {
+        const files = [];
+        for (let i = 0; i < dataTransfer.items.length; i++) {
+            // If dropped items aren't files, reject them
+            if (dataTransfer.items[i].kind === 'file') {
+                files.push(dataTransfer.items[i].getAsFile());
+            }
+        }
+        dataTransfer.items.clear();
+        uploadFiles(convert(files));
+    } else {
+        const files = dataTransfer.files;
+        dataTransfer.clearData();
+        uploadFiles(convert(files));
+    }
+}
+
+function convert(files: FileList | File[]): FileUploadModel[] {
+    const uploadFiles: FileUploadModel[] = [];
+    for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        uploadFiles.push({
+            file: file,
+            progress: 0,
+            completed: false,
+            error: null,
+            retryCount: 0
+        });
+    }
+    return uploadFiles;
+}
diff --git a/apps/red-ui/src/assets/i18n/en.json b/apps/red-ui/src/assets/i18n/en.json
index b280f3efa..1a7cba803 100644
--- a/apps/red-ui/src/assets/i18n/en.json
+++ b/apps/red-ui/src/assets/i18n/en.json
@@ -185,7 +185,7 @@
         "approve": "Approve",
         "under-review": "Under Review",
         "no-files-match": "No File match your current filters",
-        "upload-files": "Drop files anywhere for upload!",
+        "upload-files": "Drag & Drop files here",
         "upload-files-btn": "Upload Files",
         "new-rule": {
             "label": "Outdated",