131 lines
3.6 KiB
TypeScript
131 lines
3.6 KiB
TypeScript
import {Component, ElementRef, ViewChild} from '@angular/core';
|
|
import {NgIf} from "@angular/common";
|
|
import {FormatFileSizePipePipe} from "../format-file-size-pipe.pipe";
|
|
import {FormsModule} from "@angular/forms";
|
|
import axios from "axios";
|
|
|
|
@Component({
|
|
selector: 'app-upload',
|
|
standalone: true,
|
|
imports: [
|
|
NgIf,
|
|
FormatFileSizePipePipe,
|
|
FormsModule
|
|
],
|
|
templateUrl: './upload.component.html',
|
|
styleUrl: './upload.component.scss'
|
|
})
|
|
export class UploadComponent {
|
|
@ViewChild('fileInput') fileInput!: ElementRef;
|
|
|
|
fileToUpload: File | null = null;
|
|
|
|
shortStorage: boolean = false;
|
|
singleDownload: boolean = false;
|
|
passwordProtected: boolean = false;
|
|
password: string = '';
|
|
|
|
uploadStarted: boolean = false;
|
|
uploadProgress = 0;
|
|
uploadFinished = false;
|
|
|
|
uploadSpeedBps: number = 0;
|
|
|
|
constructor() {
|
|
this.uploadSpeedTest();
|
|
}
|
|
|
|
/**
|
|
* Manages the file input click or drag and drop
|
|
*/
|
|
onFileSelected(event: any): void {
|
|
const files = event.target.files;
|
|
if (files && files.length > 0) {
|
|
this.handleFiles(files);
|
|
}
|
|
}
|
|
onDragOver(event: DragEvent): void {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
// Optionally add visual feedback
|
|
}
|
|
onDrop(event: DragEvent): void {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
const files = event.dataTransfer?.files;
|
|
if (files && files.length > 0) {
|
|
this.handleFiles(files);
|
|
}
|
|
// Remove visual feedback
|
|
}
|
|
handleFiles(files: FileList): void {
|
|
for(let i = 0; i < files.length; i++) {
|
|
const file = files[i];
|
|
this.fileToUpload = file;
|
|
}
|
|
}
|
|
|
|
startUpload(): void {
|
|
if (this.fileToUpload) {
|
|
console.log(`Uploading file: ${this.fileToUpload.name}, Short storage: ${this.shortStorage}, Single download: ${this.singleDownload}, Password protected: ${this.passwordProtected}`);
|
|
this.uploadStarted = true;
|
|
|
|
this.calculateEstimatedUploadTime();
|
|
|
|
|
|
const interval = setInterval(() => {
|
|
if (this.uploadProgress < 100) {
|
|
this.uploadProgress++;
|
|
} else {
|
|
clearInterval(interval); // Stop the interval when progress reaches 100%
|
|
this.uploadFinished = true;
|
|
}
|
|
}, 10);
|
|
|
|
}
|
|
}
|
|
|
|
private uploadSpeedTest() {
|
|
const start = new Date().getTime(); // Start timer
|
|
|
|
// Create a 1MB payload for upload
|
|
const payload = new ArrayBuffer(1024 * 1024); // 1MB
|
|
const uint8View = new Uint8Array(payload);
|
|
for (let i = 0; i < uint8View.length; i++) {
|
|
uint8View[i] = 0;
|
|
}
|
|
|
|
axios({
|
|
method: 'post',
|
|
url: 'http://localhost/api/v1/upload-speed-test',
|
|
data: uint8View,
|
|
headers: {
|
|
'Content-Type': 'application/octet-stream',
|
|
'Access-Control-Allow-Origin': '*', // Allow CORS
|
|
},
|
|
onUploadProgress: function(progressEvent) {
|
|
// Optional: handle progress events for feedback
|
|
}
|
|
})
|
|
.then(response => {
|
|
const end = new Date().getTime(); // End timer
|
|
const duration = (end - start) / 1000; // Convert ms to seconds
|
|
const bitsUploaded = payload.byteLength * 8;
|
|
this.uploadSpeedBps = bitsUploaded / duration;
|
|
console.log("Speed test ping finished.");
|
|
})
|
|
.catch(error => {
|
|
console.error('Error during upload test:', error);
|
|
});
|
|
}
|
|
|
|
private calculateEstimatedUploadTime() : void {
|
|
const fileSize = this.fileToUpload?.size;
|
|
const uploadSpeed = this.uploadSpeedBps / 8; // Convert bits per second to bytes per second
|
|
if (fileSize && uploadSpeed) {
|
|
const estimatedTimeInSeconds = fileSize / uploadSpeed;
|
|
console.log(`Estimated upload time: ${estimatedTimeInSeconds} seconds`);
|
|
}
|
|
}
|
|
}
|