file-upload.component.html

<div class="m-auto p-4 max-w-sm">
    <div class="flex flex-col border-2 border-dashed rounded-2xl p-6 text-center transition-all duration-200"
        [class.bg-blue-50]="isDragging()" [class.border-blue-400]="isDragging()" [class.text-blue-600]="isDragging()"
        (dragover)="onDragOver($event)" (dragleave)="onDragLeave($event)" (drop)="onDrop($event)">

        <fa-icon [icon]="cloudUpload" class="text-4xl text-blue-400"></fa-icon>

        <p class="text-xs mb-2">( {{ allowedExtensionsStr() }} )</p>

        <p class="text-gray-700">Trascina qui i file o</p>
        <label class="text-blue-600 font-semibold underline cursor-pointer">
            selezionali
            <input type="file" class="hidden" multiple (change)="onFilesSelected($event)"
                [accept]="allowedExtensionsInputList()" />
        </label>

        <button (click)="!isUploaded() ? uploadAll() : clearFiles()"
            class="w-28 self-center mt-2 inline-flex items-center gap-2 text-white font-semibold py-2 px-4 rounded-lg shadow-md transition duration-300 disabled:opacity-50 disabled:cursor-not-allowed"
            [ngClass]="{
                  'bg-green-500 hover:bg-green-700': isUploaded(),
                  'bg-blue-600 hover:bg-blue-700': !isUploaded()
                }" [disabled]="!files().length">
            @if(!isUploaded()){ <fa-icon [icon]="uploadIcon" />Carica }
            @else { <fa-icon [icon]="clear" />Pulisci }
        </button>

    </div>
</div>
<div class="px-4 mt-6 grid gap-4 grid-cols-1 sm:grid-cols-2 md:grid-cols-3 xl:grid-cols-4">

    @for(upload of files(); track upload.uuid) {

    <div class="bg-white border border-gray-200 rounded-xl shadow p-4 flex flex-col justify-between">
        <div class="flex items-center gap-2 mb-3">

            @if(upload.status === 'done'){
            <fa-icon [icon]="checkCircle" class="text-green-500 text-lg"></fa-icon>
            }
            @else if(upload.status === 'uploading'){
            <fa-icon [icon]="spinner" class="text-blue-500 text-lg"></fa-icon>
            }@else{
            <fa-icon [icon]="fileAlt" class="text-gray-500 text-xl"></fa-icon>
            }

            <div class="flex-1">
                <input [(ngModel)]="upload.baseName" (ngModelChange)="updateCustomName(upload)"
                    (blur)="sanitizeBaseName(upload)"
                    class="border-b border-gray-300 focus:border-blue-500 focus:outline-none w-full font-medium" />
                <div class="flex justify-between items-center">
                    <span class="text-sm text-gray-500">{{ upload.extension }}</span>

                </div>
            </div>
        </div>

        <div class="w-full h-2 bg-gray-200 rounded overflow-hidden mb-2">
            <div class="h-full rounded bg-blue-500 transition-all duration-300" [style.width.%]="upload.progress"
                [ngClass]="{
                  'bg-green-500': upload.status === 'done',
                  'bg-red-500': upload.status === 'error'
                }"></div>
        </div>

        <div class="mb-2 flex items-center" [ngClass]="{
                'justify-between' : upload.status === 'invalid'|| upload.status === 'error',
                'justify-end' : upload.status !== 'invalid' && upload.status !== 'error'
                }">

            @if(upload.status === 'invalid'|| upload.status === 'error'){
            <div class="text-xs text-red-500">
                <fa-icon [icon]="exclTriangle"></fa-icon>
                {{ upload.errorMessage }}
            </div>
            }

            <button (click)="removeFile(upload)" class="cursor-pointer">
                <fa-icon [icon]="trash" class="mr-1" />
            </button>
        </div>

        <div class="flex items-center justify-center text-sm mt-auto pt-2 border-t border-gray-100">
            @if(upload.status === 'error'){
            <button (click)="uploadFile(upload)" class="text-blue-500 hover:underline">
                <fa-icon [icon]="uploadIcon" class="mr-1"></fa-icon>Riprova
            </button>
            }
        </div>

    </div>

    }
</div>