90 lines
2.5 KiB
TypeScript
90 lines
2.5 KiB
TypeScript
import {Component, ElementRef, OnInit, ViewChild} from '@angular/core';
|
|
|
|
@Component({
|
|
selector: 'app-drag-and-drop',
|
|
templateUrl: './drag-and-drop.component.html',
|
|
styleUrls: ['./drag-and-drop.component.scss']
|
|
})
|
|
export class DragAndDropComponent
|
|
{
|
|
@ViewChild("fileDropRef", { static: false }) fileDropEl: ElementRef;
|
|
files: any[] = [];
|
|
info_image = "Vos annonces seront affichées dans un rectangle de rapport 1/5 avec: \n • 1 la largeur durectangle \n • 5 la hauteur du rectangle" ;
|
|
|
|
|
|
/**
|
|
* on file drop handler
|
|
*/
|
|
onFileDropped($event) {
|
|
this.prepareFilesList($event);
|
|
}
|
|
|
|
/**
|
|
* handle file from browsing
|
|
*/
|
|
fileBrowseHandler(files) {
|
|
this.prepareFilesList(files);
|
|
}
|
|
|
|
/**
|
|
* Delete file from files list
|
|
* @param index (File index)
|
|
*/
|
|
deleteFile(index: number) {
|
|
if (this.files[index].progress < 100) {
|
|
console.log("Upload in progress.");
|
|
return;
|
|
}
|
|
this.files.splice(index, 1);
|
|
}
|
|
|
|
/**
|
|
* Simulate the upload process
|
|
*/
|
|
uploadFilesSimulator(index: number) {
|
|
setTimeout(() => {
|
|
if (index === this.files.length) {
|
|
return;
|
|
} else {
|
|
const progressInterval = setInterval(() => {
|
|
if (this.files[index].progress === 100) {
|
|
clearInterval(progressInterval);
|
|
this.uploadFilesSimulator(index + 1);
|
|
} else {
|
|
this.files[index].progress += 5;
|
|
}
|
|
}, 200);
|
|
}
|
|
}, 1000);
|
|
}
|
|
|
|
/**
|
|
* Convert Files list to normal array list
|
|
* @param files (Files List)
|
|
*/
|
|
prepareFilesList(files: Array<any>) {
|
|
for (const item of files) {
|
|
item.progress = 0;
|
|
this.files.push(item);
|
|
}
|
|
this.fileDropEl.nativeElement.value = "";
|
|
this.uploadFilesSimulator(0);
|
|
}
|
|
|
|
/**
|
|
* format bytes
|
|
* @param bytes (File size in bytes)
|
|
* @param decimals (Decimals point)
|
|
*/
|
|
formatBytes(bytes, decimals = 2) {
|
|
if (bytes === 0) {
|
|
return "0 Bytes";
|
|
}
|
|
const k = 1024;
|
|
const dm = decimals <= 0 ? 0 : decimals;
|
|
const sizes = ["Bytes", "KB", "MB", "GB", "TB", "PB", "EB", "ZB", "YB"];
|
|
const i = Math.floor(Math.log(bytes) / Math.log(k));
|
|
return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + " " + sizes[i];
|
|
}
|
|
|
|
}
|