diff --git a/frontend/src/app/format-file-size-pipe.pipe.spec.ts b/frontend/src/app/format-file-size-pipe.pipe.spec.ts new file mode 100644 index 0000000..0d1235e --- /dev/null +++ b/frontend/src/app/format-file-size-pipe.pipe.spec.ts @@ -0,0 +1,8 @@ +import { FormatFileSizePipePipe } from './format-file-size-pipe.pipe'; + +describe('FormatFileSizePipePipe', () => { + it('create an instance', () => { + const pipe = new FormatFileSizePipePipe(); + expect(pipe).toBeTruthy(); + }); +}); diff --git a/frontend/src/app/format-file-size-pipe.pipe.ts b/frontend/src/app/format-file-size-pipe.pipe.ts new file mode 100644 index 0000000..b7c1040 --- /dev/null +++ b/frontend/src/app/format-file-size-pipe.pipe.ts @@ -0,0 +1,19 @@ +import { Pipe, PipeTransform } from '@angular/core'; + +@Pipe({ + name: 'formatFileSizePipe', + standalone: true +}) +export class FormatFileSizePipePipe implements PipeTransform { + + transform(value: number, ...args: unknown[]): string { + if (value === null || value === 0) return '0 Bytes'; + + const units = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']; + const index = Math.min(Math.floor(Math.log(value) / Math.log(1024)), units.length - 1); + const filesize = Number((value / Math.pow(1024, index)).toFixed(2)); + + return `${filesize.toLocaleString()} ${units[index]}`; + } + +} diff --git a/frontend/src/app/upload/upload.component.html b/frontend/src/app/upload/upload.component.html index 2be1da3..f905d7d 100644 --- a/frontend/src/app/upload/upload.component.html +++ b/frontend/src/app/upload/upload.component.html @@ -1,34 +1,63 @@

Upload Your File

-
+
-
+

Drag and drop your files here or browse

- + +
+ +
+ +

{{ fileToUpload.name }}

+

{{ fileToUpload.size | formatFileSizePipe }}

- - Store for only one hour + +
- - Allow only one download + +
- - Protect download with password + +
- + +
+
+
{{uploadProgress}}%
+

Uploading {{ fileToUpload.name }}...

+
+
+ +

File uploaded successfully!

+

Drag and drop files, or click to select the files you want to share.

+ + diff --git a/frontend/src/app/upload/upload.component.ts b/frontend/src/app/upload/upload.component.ts index 0324250..770c0d9 100644 --- a/frontend/src/app/upload/upload.component.ts +++ b/frontend/src/app/upload/upload.component.ts @@ -1,12 +1,78 @@ -import { Component } from '@angular/core'; +import {Component, ElementRef, ViewChild} from '@angular/core'; +import {NgIf} from "@angular/common"; +import {FormatFileSizePipePipe} from "../format-file-size-pipe.pipe"; +import {FormsModule} from "@angular/forms"; @Component({ selector: 'app-upload', standalone: true, - imports: [], + imports: [ + NgIf, + FormatFileSizePipePipe, + FormsModule + ], templateUrl: './upload.component.html', styleUrl: './upload.component.scss' }) export class UploadComponent { + @ViewChild('fileInput') fileInput!: ElementRef; + fileToUpload: File | null = null; + + shortStorage: boolean = false; + singleDownload: boolean = false; + passwordProtected: boolean = false; + password: string = ''; + + uploadStarted: boolean = false; + uploadProgress = 0; + uploadFinished = false; + + /** + * Manages the file input click or drag and drop + */ + onFileSelected(event: any): void { + const files = event.target.files; + if (files && files.length > 0) { + this.handleFiles(files); + } + } + onDragOver(event: DragEvent): void { + event.preventDefault(); + event.stopPropagation(); + // Optionally add visual feedback + } + onDrop(event: DragEvent): void { + event.preventDefault(); + event.stopPropagation(); + const files = event.dataTransfer?.files; + if (files && files.length > 0) { + this.handleFiles(files); + } + // Remove visual feedback + } + handleFiles(files: FileList): void { + for(let i = 0; i < files.length; i++) { + const file = files[i]; + this.fileToUpload = file; + } + } + + startUpload(): void { + if (this.fileToUpload) { + console.log(`Uploading file: ${this.fileToUpload.name}, Short storage: ${this.shortStorage}, Single download: ${this.singleDownload}, Password protected: ${this.passwordProtected}`); + this.uploadStarted = true; + + + const interval = setInterval(() => { + if (this.uploadProgress < 100) { + this.uploadProgress++; + } else { + clearInterval(interval); // Stop the interval when progress reaches 100% + this.uploadFinished = true; + } + }, 10); + + } + } } diff --git a/frontend/src/assets/circle-check-solid.svg b/frontend/src/assets/circle-check-solid.svg new file mode 100644 index 0000000..504bf80 --- /dev/null +++ b/frontend/src/assets/circle-check-solid.svg @@ -0,0 +1 @@ + diff --git a/frontend/src/assets/file-solid.svg b/frontend/src/assets/file-solid.svg new file mode 100644 index 0000000..f953184 --- /dev/null +++ b/frontend/src/assets/file-solid.svg @@ -0,0 +1 @@ +