Alexis Feron
5 months ago
parent
ec66934ce3
commit
14cf8a7eac
@ -0,0 +1,72 @@
|
||||
<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">
|
||||
<span class="font-semibold">Click to upload</span> or drag and drop
|
||||
</p>
|
||||
<p class="text-xs text-gray-500 dark:text-gray-400">PNG, JPG or GIF</p>
|
||||
</div>
|
||||
|
||||
<!-- Input masqué -->
|
||||
<input
|
||||
#fileInput
|
||||
class="hidden"
|
||||
type="file"
|
||||
multiple
|
||||
(change)="onFilesSelected($event)"
|
||||
/>
|
||||
</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 fileName of fileNames">
|
||||
{{ fileName }}
|
||||
<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(fileName)"
|
||||
>
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
@ -0,0 +1,23 @@
|
||||
import { ComponentFixture, TestBed } from '@angular/core/testing';
|
||||
|
||||
import { DragDropComponent } from './drag-drop.component';
|
||||
|
||||
describe('DragDropComponent', () => {
|
||||
let component: DragDropComponent;
|
||||
let fixture: ComponentFixture<DragDropComponent>;
|
||||
|
||||
beforeEach(async () => {
|
||||
await TestBed.configureTestingModule({
|
||||
imports: [DragDropComponent]
|
||||
})
|
||||
.compileComponents();
|
||||
|
||||
fixture = TestBed.createComponent(DragDropComponent);
|
||||
component = fixture.componentInstance;
|
||||
fixture.detectChanges();
|
||||
});
|
||||
|
||||
it('should create', () => {
|
||||
expect(component).toBeTruthy();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,45 @@
|
||||
import { CommonModule } from '@angular/common';
|
||||
import { Component } from '@angular/core';
|
||||
|
||||
@Component({
|
||||
selector: 'app-drag-drop',
|
||||
imports: [CommonModule],
|
||||
templateUrl: './drag-drop.component.html',
|
||||
})
|
||||
export class DragDropComponent {
|
||||
fileNames: string[] = [];
|
||||
|
||||
onFilesSelected(event: Event): void {
|
||||
const input = event.target as HTMLInputElement;
|
||||
if (input.files) {
|
||||
this.updateFileNames(input.files);
|
||||
}
|
||||
}
|
||||
|
||||
onDrop(event: DragEvent): void {
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
if (event.dataTransfer && event.dataTransfer.files) {
|
||||
this.updateFileNames(event.dataTransfer.files);
|
||||
}
|
||||
}
|
||||
|
||||
onDragOver(event: DragEvent): void {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
onDragLeave(event: DragEvent): void {
|
||||
event.preventDefault();
|
||||
}
|
||||
|
||||
private updateFileNames(files: FileList): void {
|
||||
for (let i = 0; i < files.length; i++) {
|
||||
this.fileNames.push(files[i].name);
|
||||
}
|
||||
}
|
||||
|
||||
removeFile(fileName: string): void {
|
||||
const index = this.fileNames.indexOf(fileName);
|
||||
this.fileNames.splice(index, 1);
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue