Max665/sharepulse
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added file upload UI

Browse Source
This commit is contained in:
Max W.
2024-02-07 23:51:58 +01:00
parent c05cd770c6
commit b15529008b
6 changed files with 136 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
frontend/src/app/upload/upload.component.html
View File

@ -1,34 +1,63 @@
<div class="container mx-auto p-4 mt-4">
<h1 class="text-4xl font-bold text-center text-gray-800 mb-10">Upload Your File</h1>
<div class="bg-white shadow-lg rounded-lg p-6">
<div class="flex flex-col items-center justify-center">
<div *ngIf="!uploadStarted" class="flex flex-col items-center justify-center">
<!-- File Drop Area -->
<div class="border-2 border-dashed border-gray-300 rounded-lg w-full p-20 flex flex-col items-center justify-center mb-6">
<div
*ngIf="!fileToUpload && !uploadStarted"
(drop)="onDrop($event)"
(dragover)="onDragOver($event)"
(click)="fileInput.click()"
class="border-2 border-dashed border-gray-300 rounded-lg w-full p-20 flex flex-col items-center justify-center mb-6 animate-in fade-in duration-500">
<img class="w-16 mb-3" src="./assets/cloud-arrow-up-solid.svg">
<p class="text-gray-700 mb-3">Drag and drop your files here or <span class="text-blue-600 cursor-pointer">browse</span></p>
<input type="file" class="hidden" />
<input
#fileInput
(change)="onFileSelected($event)"
type="file" class="hidden" />
</div>
<!-- File Details -->
<div
*ngIf="fileToUpload && !uploadStarted"
class="w-full p-10 flex flex-col items-center justify-center mb-3 animate-in fade-in duration-500">
<img class="w-14 mb-3" src="./assets/file-solid.svg">
<p class="text-gray-700 mb-3"> {{ fileToUpload.name }} </p>
<p class="text-gray-700 mb-3"> {{ fileToUpload.size | formatFileSizePipe }} </p>
</div>
<!-- Settings -->
<div class="w-full mb-10">
<label class="block text-gray-700 text-l font-bold mb-4">Options</label>
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
<div class="flex items-center">
<input type="checkbox" class="toggle" checked />
<span class="ml-2 text-gray-700">Store for only one hour</span>
<input id="shortStorage" [(ngModel)]="shortStorage" type="checkbox" class="toggle" checked />
<label for="shortStorage" class="ml-2 text-gray-700">Store for only one hour</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="toggle" />
<span class="ml-2 text-gray-700">Allow only one download</span>
<input id="singleDownload" [(ngModel)]="singleDownload" type="checkbox" class="toggle" />
<label for="singleDownload" class="ml-2 text-gray-700">Allow only one download</label>
</div>
<div class="flex items-center">
<input type="checkbox" class="toggle" />
<span class="ml-2 text-gray-700">Protect download with password</span>
<input id="passwordProtected" [(ngModel)]="passwordProtected" type="checkbox" class="toggle" />
<label for="passwordProtected" class="ml-2 text-gray-700">Protect download with password</label>
</div>
</div>
</div>
<!-- Upload Button -->
<button class="btn btn-primary w-full max-w-xs">Upload Files</button>
<button class="btn btn-primary w-full max-w-xs" (click)="startUpload()">Upload File</button>
</div>
<div *ngIf="uploadStarted && fileToUpload && !uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-500">
<div class="radial-progress" [style.--value]="uploadProgress" style="--size:12rem; --thickness: 2rem;" role="progressbar">{{uploadProgress}}%</div>
<p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
</div>
<div *ngIf="uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-1000">
<img class="w-16 mb-3" src="./assets/circle-check-solid.svg">
<p class="text-gray-700 mb-3">File uploaded successfully!</p>
<button class="btn btn-primary w-full max-w-xs">Upload Another File</button>
</div>
</div>
<p class="text-gray-600 text-center mt-6">Drag and drop files, or click to select the files you want to share.</p>
</div>
<!-- Invisible SVGs to prevent lazy loading -->
<div class="invisible">
<img src="./assets/file-solid.svg">
</div>