You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
108 lines
3.3 KiB
108 lines
3.3 KiB
<div
|
|
class="flex flex-col items-center justify-center w-full h-36 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:hover:bg-gray-800 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500"
|
|
(click)="fileInput.click()"
|
|
(drop)="onDrop($event)"
|
|
(dragover)="onDragOver($event)"
|
|
(dragleave)="onDragLeave($event)"
|
|
>
|
|
<div class="flex flex-col items-center justify-center pt-5 pb-6">
|
|
<svg
|
|
class="w-8 h-8 mb-4 text-gray-500 dark:text-gray-400"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 20 16"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="M13 13h3a3 3 0 0 0 0-6h-.025A5.56 5.56 0 0 0 16 6.5 5.5 5.5 0 0 0 5.207 5.021C5.137 5.017 5.071 5 5 5a4 4 0 0 0 0 8h2.167M10 15V6m0 0L8 8m2-2 2 2"
|
|
/>
|
|
</svg>
|
|
<p class="mb-2 text-sm text-gray-500 dark:text-gray-400 text-center">
|
|
<span class="font-semibold">Cliquez pour télécharger</span><br />
|
|
ou glissez-déposez
|
|
</p>
|
|
<p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG ou GIF</p>
|
|
</div>
|
|
|
|
<!-- Input masqué -->
|
|
<input
|
|
#fileInput
|
|
class="hidden"
|
|
type="file"
|
|
formControlName="files"
|
|
multiple
|
|
(change)="onFilesSelected($event)"
|
|
/>
|
|
</div>
|
|
|
|
<!-- Message d'erreur -->
|
|
<div *ngIf="errorMessage" class="mt-2 text-sm text-red-600 dark:text-red-400">
|
|
{{ errorMessage }}
|
|
</div>
|
|
|
|
<!-- Zone pour afficher les fichiers sélectionnés -->
|
|
<div
|
|
*ngIf="fileNames.length > 0"
|
|
class="mt-2 text-sm text-gray-500 dark:text-gray-400"
|
|
>
|
|
<ul>
|
|
<li *ngFor="let fileObj of fileNames" class="relative">
|
|
<span
|
|
(mouseenter)="onFileNameMouseEnter(fileObj.name)"
|
|
class="cursor-pointer underline decoration-dotted max-w-[160px] truncate inline-block align-middle z-50"
|
|
[title]="fileObj.name"
|
|
>
|
|
{{
|
|
fileObj.name.length > 24
|
|
? (fileObj.name | slice : 0 : 10) +
|
|
"..." +
|
|
(fileObj.name | slice : -10)
|
|
: fileObj.name
|
|
}}
|
|
</span>
|
|
<button
|
|
type="button"
|
|
class="end-2.5 text-gray-400 bg-transparent hover:text-gray-900 rounded-lg text-sm w-6 h-6 ms-auto inline-flex justify-center items-center dark:hover:text-white"
|
|
(click)="removeFile(fileObj.name, $event)"
|
|
>
|
|
<svg
|
|
class="w-2 h-2"
|
|
aria-hidden="true"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
fill="none"
|
|
viewBox="0 0 14 14"
|
|
>
|
|
<path
|
|
stroke="currentColor"
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
stroke-width="2"
|
|
d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"
|
|
/>
|
|
</svg>
|
|
<span class="sr-only">Delete</span>
|
|
</button>
|
|
<div
|
|
*ngIf="hoveredFileName === fileObj.name && previewUrl"
|
|
class="absolute top-8 left-20 z-20 border-2 border-gray-300 rounded shadow-lg"
|
|
>
|
|
<img
|
|
[src]="previewUrl"
|
|
alt="Preview"
|
|
class="object-cover max-w-full max-h-[120px] rounded"
|
|
style="
|
|
min-width: 120px;
|
|
min-height: 80px;
|
|
max-width: 200px;
|
|
max-height: 150px;
|
|
"
|
|
/>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|