Marmelator/red-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1.4k Wiki Activity

file drop rework

Browse Source
This commit is contained in:
Timo 2020-12-15 19:21:22 +02:00
parent 130cd7b747
commit 1a3779bc62
6 changed files with 83 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
apps/red-ui/src/app/screens/project-overview-screen/project-overview-screen.component.ts
View File

@ -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();
}

8
apps/red-ui/src/app/upload/file-drop/file-drop.component.html
View File

@ -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>

15
apps/red-ui/src/app/upload/file-drop/file-drop.component.scss
View File

@ -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 {

32
apps/red-ui/src/app/upload/file-drop/file-drop.component.ts
View File

@ -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();

37
apps/red-ui/src/app/utils/file-drop-utils.ts Normal file
View File

@ -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;
}

2
apps/red-ui/src/assets/i18n/en.json
View File

@ -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",