sharepulse/frontend/src/app/upload/upload.component.html

<div class="container mx-auto p-4 mt-4 animate-in fade-in slide-in-from-right-6 duration-300">
  <h1 class="text-4xl font-bold text-center text-gray-800 mb-5">Upload Your File</h1>
  <div class="bg-white shadow-lg rounded-lg lg:p-6 p-3">
    <div *ngIf="!uploadStarted" class="flex flex-col items-center justify-center lg:p-5">
      <!-- File Drop Area -->
      <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
          #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 id="shortStorage" [(ngModel)]="shortStorage" type="checkbox" class="toggle" [disabled]="true"/>
            <label for="shortStorage" class="ml-2 text-gray-700 tooltip" data-tip="This feature will be available with the next update!">Store for only one hour</label>
          </div>
          <div class="flex items-center">
            <input id="singleDownload" [(ngModel)]="singleDownload" type="checkbox" class="toggle" />
            <label for="singleDownload" class="ml-2 text-gray-700 tooltip" data-tip="If enabled, the uploaded file can only be downloaded once.">Allow only one download</label>
          </div>
          <div class="flex items-center">
            <input id="passwordProtected" [(ngModel)]="passwordProtected" type="checkbox" class="toggle" />
            <label for="passwordProtected" class="ml-2 text-gray-700 tooltip"
                   data-tip="The password will be generated by the server and is displayed after the upload is finished.">Protect download with password</label>
          </div>
        </div>
      </div>
      <!-- Upload Button -->
      <button class="btn btn-primary w-full max-w-xs hover:scale-105 transition-transform duration-100" (click)="startUpload()">Upload File</button>
      <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>
    <!-- Upload Progress -->
    <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 | number:'1.0-0' }}%</div>
      <p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
    </div>
    <!-- Upload Finished -->
    <div *ngIf="uploadFinished" class="flex flex-col items-center justify-center lg:p-6 animate-fade-in-up">
      <div class="flex items-center justify-center rounded-full p-2 border-4 border-indigo-500">
        <img class="w-16" [ngClass]="{'animate-in spin-in-1 duration-1000': uploadFinished}" src="./assets/circle-check-solid.svg" alt="Success">
      </div>

      <h3 class="text-lg font-semibold mt-3">File uploaded successfully!</h3>

      <div class="flex flex-wrap mt-5 mb-5" *ngIf="uploadData && fileUrls">
        <div class="w-full px-4">
          <div class="grid grid-cols-1 md:grid-cols-2 gap-4 items-center">
            <div class="text-gray-600 lg:text-right">File name:</div>
            <div>{{uploadData.fileName}}</div>

            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Is password protected:</div>
            <label class="flex items-center space-x-2">
              <input type="checkbox" class="checkbox checkbox-primary" [checked]="uploadData.passwordProtected" (click)="$event.preventDefault()"/>
              <span>{{uploadData.passwordProtected ? 'Yes' : 'No'}}</span>
            </label>

            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Is single download:</div>
            <label class="flex items-center space-x-2">
              <input type="checkbox" class="checkbox checkbox-primary" [checked]="uploadData.singleDownload" (click)="$event.preventDefault()"/>
              <span>{{uploadData.singleDownload ? 'Yes' : 'No'}}</span>
            </label>
            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Download password:</div>
            <div>{{uploadData.password || 'N/A'}}</div>

            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">File ID:</div>
            <div>{{uploadData.fileId}}</div>

            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">Download URL:</div>
            <div><a href="{{fileUrls.downloadUrl}}" target="_blank">{{fileUrls.downloadUrl}}</a></div>


            <!--
            Currently disabled because the status page is not available yet
            <div class="text-gray-600 lg:text-right mt-1 lg:mt-0">File Status URL:</div>
            <div><a href="{{fileUrls.statusUrl}}" target="_blank">{{fileUrls.statusUrl}}</a></div>
            -->
          </div>
        </div>
      </div>





      <p class="text-sm text-gray-500 mt-1">Your file is now securely stored on our servers.</p>

      <div class="mt-4 flex flex-col w-full items-center">
        <button class="btn btn-success w-full max-w-xs text-white hover:scale-105 transition-transform duration-100" (click)="copyUrlToClipboard(this.fileUrls?.downloadUrl)">
          <div *ngIf="!urlCopied">Copy Download URL</div>
          <div *ngIf="urlCopied"><img width="20" src="./assets/check-solid.svg" alt="kk"></div>
        </button>
        <button class="btn btn-primary mt-2 w-full max-w-xs hover:scale-105 transition-transform duration-100" routerLink="/home">Home</button>
        <button class="btn btn-outline btn-secondary mt-2 w-full max-w-xs hover:scale-105 transition-transform duration-100" disabled>Delete this file</button>
      </div>
    </div>

  </div>
</div>
<!-- Invisible SVGs to prevent lazy loading -->
<div class="invisible h-0 w-0">
  <img src="./assets/file-solid.svg">
  <img src="./assets/check-solid.svg">
  <img src="./assets/circle-check-solid.svg">
</div>