27 lines
1.1 KiB
HTML
27 lines
1.1 KiB
HTML
<div
|
|
class="dropzone"
|
|
[class.dragover]="isDragOver()"
|
|
(dragover)="onDragOver($event)"
|
|
(dragleave)="onDragLeave($event)"
|
|
(drop)="onDrop($event)"
|
|
(click)="fileInput.click()"
|
|
>
|
|
<input #fileInput type="file" (change)="onFileSelected($event)" hidden [accept]="accept()" [multiple]="multiple()">
|
|
|
|
<div class="content">
|
|
<div class="icon">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-upload-cloud"><polyline points="16 16 12 12 8 16"></polyline><line x1="12" y1="12" x2="12" y2="21"></line><path d="M20.39 18.39A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.3"></path><polyline points="16 16 12 12 8 16"></polyline></svg>
|
|
</div>
|
|
<p class="text">{{ label() }}</p>
|
|
<p class="subtext">{{ subtext() }}</p>
|
|
|
|
@if (fileNames().length > 0) {
|
|
<div class="file-badges">
|
|
@for (name of fileNames(); track name) {
|
|
<div class="file-badge">{{ name }}</div>
|
|
}
|
|
</div>
|
|
}
|
|
</div>
|
|
</div>
|