Dockery/Picsur
1
0
Fork 0
mirror of https://github.com/CaramelFur/Picsur.git synced 2025-10-25 23:46:06 +02:00
Code Issues Packages Projects Releases Wiki Activity

Remove deprecated filedrop library

Browse Source
This commit is contained in:
Caramel
2024-10-30 21:14:39 +01:00
parent b068b5492d
commit 73b2850ce4
8 changed files with 71 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/package.json
View File

@@ -53,7 +53,6 @@
"moment": "^2.30.1",
"ng-mat-select-infinite-scroll": "^4.0.0",
"ngx-auto-unsubscribe-decorator": "^1.1.0",
"ngx-dropzone": "^3.1.0",
"ngx-moment": "^6.0.2",
"picsur-shared": "workspace:^",
"reflect-metadata": "^0.2.2",
@@ -64,5 +63,8 @@
"webpack-bundle-analyzer": "^4.10.2",
"zod": "^3.23.8",
"zone.js": "~0.14.0"
},
"dependencies": {
"@ngx-dropzone/cdk": "^18.1.1"
}
}

3
frontend/src/app/routes/upload/dropzone/dropzone.component.html Normal file
View File

@@ -0,0 +1,3 @@
<div class="dropzone" (click)="onContainerClick()">
<ng-content></ng-content>
</div>

6
frontend/src/app/routes/upload/dropzone/dropzone.component.scss Normal file
View File

@@ -0,0 +1,6 @@
.dropzone {
cursor: pointer;
text-align: center;
width: 100%;
height: 100%;
}

13
frontend/src/app/routes/upload/dropzone/dropzone.component.ts Normal file
View File

@@ -0,0 +1,13 @@
import { Component } from "@angular/core";
import { DropzoneComponent } from "@ngx-dropzone/cdk";
@Component({
selector: "my-dropzone",
templateUrl: "./dropzone.component.html",
styleUrls: ["./dropzone.component.scss"],
})
export class CustomDropzone extends DropzoneComponent {
onContainerClick() {
this.openFilePicker();
}
}

5
frontend/src/app/routes/upload/upload.component.html
View File

@@ -1,10 +1,11 @@
<div class="content-border">
<ngx-dropzone *ngIf="canUpload" (change)="onSelect($event)">
<my-dropzone *ngIf="canUpload">
<input type="file" fileInput [formControl]="fileControl" />
<div class="centered">
<h1>Upload Image</h1>
<p>Drag and drop / paste an image here, or click to select an image</p>
</div>
</ngx-dropzone>
</my-dropzone>
<div class="centered" *ngIf="!canUpload">
<h1><a routerLink="/user/login">Please log in</a></h1>

25
frontend/src/app/routes/upload/upload.component.ts
View File

@@ -1,7 +1,8 @@
import { Component, HostListener, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { Router } from '@angular/router';
import { FileInputValue } from '@ngx-dropzone/cdk';
import { AutoUnsubscribe } from 'ngx-auto-unsubscribe-decorator';
import { NgxDropzoneChangeEvent } from 'ngx-dropzone';
import { Permission } from 'picsur-shared/dist/dto/permissions.enum';
import { Fail, FT } from 'picsur-shared/dist/types/failable';
import { debounceTime } from 'rxjs';
@@ -19,6 +20,8 @@ export class UploadComponent implements OnInit {
canUpload = true;
fileControl = new FormControl<FileInputValue>(null);
constructor(
private readonly router: Router,
private readonly permissionService: PermissionService,
@@ -27,6 +30,17 @@ export class UploadComponent implements OnInit {
ngOnInit(): void {
this.onPermission();
this.onFileChange();
}
@AutoUnsubscribe()
onFileChange() {
return this.fileControl.valueChanges.subscribe((file) => {
if (!file) return;
let files = Array.isArray(file) ? file : [file];
const metadata: ProcessingViewMeta = new ProcessingViewMeta(files);
this.router.navigate(['/processing'], { state: metadata });
});
}
@AutoUnsubscribe()
@@ -37,14 +51,7 @@ export class UploadComponent implements OnInit {
this.canUpload = permissions.includes(Permission.ImageUpload);
});
}
onSelect(event: NgxDropzoneChangeEvent) {
const metadata: ProcessingViewMeta = new ProcessingViewMeta(
event.addedFiles,
);
this.router.navigate(['/processing'], { state: metadata });
}
@HostListener('document:paste', ['$event'])
onPaste(event: ClipboardEvent) {
const items = event.clipboardData?.items;

11
frontend/src/app/routes/upload/upload.module.ts
View File

@@ -1,17 +1,20 @@
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { NgxDropzoneModule } from 'ngx-dropzone';
import { ReactiveFormsModule } from '@angular/forms';
import { DropzoneCdkModule } from '@ngx-dropzone/cdk';
import { ErrorManagerModule } from '../../util/error-manager/error-manager.module';
import { CustomDropzone } from './dropzone/dropzone.component';
import { UploadComponent } from './upload.component';
import { UploadRoutingModule } from './upload.routing.module';
import { ErrorManagerModule } from '../../util/error-manager/error-manager.module';
@NgModule({
declarations: [UploadComponent],
declarations: [UploadComponent, CustomDropzone],
imports: [
CommonModule,
ErrorManagerModule,
UploadRoutingModule,
NgxDropzoneModule,
ReactiveFormsModule,
DropzoneCdkModule,
],
})
export default class UploadRouteModule {}

31
pnpm-lock.yaml generated
View File

@@ -215,6 +215,10 @@ importers:
version: 5.5.4
frontend:
dependencies:
'@ngx-dropzone/cdk':
specifier: ^18.1.1
version: 18.1.1(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/forms@18.2.9(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.9(@angular/animations@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1))(rxjs@7.8.1)
devDependencies:
'@angular-builders/custom-webpack':
specifier: ^18.0.0
@@ -330,9 +334,6 @@ importers:
ngx-auto-unsubscribe-decorator:
specifier: ^1.1.0
version: 1.1.0
ngx-dropzone:
specifier: ^3.1.0
version: 3.1.0
ngx-moment:
specifier: ^6.0.2
version: 6.0.2(moment@2.30.1)
@@ -2111,6 +2112,14 @@ packages:
'@angular/common': '>=12.0.0'
'@angular/core': '>=12.0.0'
'@ngx-dropzone/cdk@18.1.1':
resolution: {integrity: sha512-h6MXBn6MWo+53xpQXMpPSTWOMQGNA3rvrVmet5uIYfFR4P9G8JxXExxpmYKDOXxZB3nHEGWt10ZCyKBmkQPEfQ==}
peerDependencies:
'@angular/common': ^18.0.0
'@angular/core': ^18.0.0
'@angular/forms': ^18.0.0
rxjs: ^7.4.0
'@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
resolution: {integrity: sha512-s88O1aVtXftvp5bCPB7WnmXc5IwOZZ7YPuwNPt+GtOOXpPvad1LfbmjYv+qII7zP6RU2QGnqve27dnLycEnyEQ==}
@@ -4531,10 +4540,6 @@ packages:
ngx-auto-unsubscribe-decorator@1.1.0:
resolution: {integrity: sha512-aNlkAaO5SvbKBXvbDHhOpYkcMsUkhZbLRzS8K5GT6ZjJ5HAkiSPHiEclvGn/a8MYkOIwFvNdmp3PyjcoS2eYMw==}
ngx-dropzone@3.1.0:
resolution: {integrity: sha512-5RBaEl07QUcY6sv/BBPyIxN6nbWY/KqTGheEKgbuGS0N1QPFY7NJUo8+X3fYUwQgLS+wjJeqPiR37dd0YNDtWA==}
deprecated: This package is deprecated and will no longer receive any updates. Please take a look at the official successor repo at hackingharold/ngx-dropzone
ngx-moment@6.0.2:
resolution: {integrity: sha512-HUvDyoJPZKLA3tc+GMQqDpVyCVT2SPfEiV7/CGj2Dwwsn//JhhQ8eTr+RzKqBzLysrXkCwlzulVVJaJ5A0FJEA==}
peerDependencies:
@@ -8596,6 +8601,14 @@ snapshots:
'@angular/core': 18.2.9(rxjs@7.8.1)(zone.js@0.14.10)
tslib: 2.8.0
'@ngx-dropzone/cdk@18.1.1(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/forms@18.2.9(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.9(@angular/animations@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1))(rxjs@7.8.1)':
dependencies:
'@angular/common': 18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1)
'@angular/core': 18.2.9(rxjs@7.8.1)(zone.js@0.14.10)
'@angular/forms': 18.2.9(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(@angular/platform-browser@18.2.9(@angular/animations@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(@angular/common@18.2.9(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10))(rxjs@7.8.1))(@angular/core@18.2.9(rxjs@7.8.1)(zone.js@0.14.10)))(rxjs@7.8.1)
rxjs: 7.8.1
tslib: 2.8.0
'@nicolo-ribaudo/chokidar-2@2.1.8-no-fsevents.3':
optional: true
@@ -11218,10 +11231,6 @@ snapshots:
dependencies:
tslib: 2.8.0
ngx-dropzone@3.1.0:
dependencies:
tslib: 2.8.0
ngx-moment@6.0.2(moment@2.30.1):
dependencies:
moment: 2.30.1