حفظ الملفات على Firebase Storage (الطريقة الجديدة) - والتحقق من أبعاد الصورة
الخدمة:
import { Injectable } from '@angular/core';
import { AngularFireStorage } from '@angular/fire/compat/storage';
import { Observable } from 'rxjs';
import { finalize } from 'rxjs/operators';
import { SnackBarService } from './snack-bar.service';
import { TranslateService } from '@ngx-translate/core';
import { LocalStorageService } from './_local-storage.service';
@Injectable({
providedIn: 'root'
})
export class FirebaseUploadService {
constructor(private storage: AngularFireStorage,
private snackBarService: SnackBarService,
private translateService: TranslateService,
private localStorageService: LocalStorageService
) { }
uploadFile(file: File, path: string, fileSize: number = 2, extensions: any = ['PNG', 'JPG']): boolean {
let extension = file.name.split('.')[1].toLocaleUpperCase();
const fileSizeMB = file.size / (1024 * 1024); // Convert file size to MB
if (file) {
if (extensions.find(res => res.toLocaleUpperCase() === extension)) {
if (fileSizeMB < fileSize) {
this._uploadFile(file, path).subscribe(url => {
this.localStorageService.set('file', url);
// Handle URL (e.g., save to database, display to user)
});
this.snackBarService.warning(this.translateService.instant('WARNING.UPLOAD_FILE'), '');
return true;
} else {
this.snackBarService.danger(this.translateService.instant('WARNING.SIZE_10_LESS_THAN').replaceAll('10', fileSize.toString()), '');
return false;
}
}
else {
this.snackBarService.danger(this.translateService.instant('ERRORS.REJECT_EXTENSION'), '');
return false;
}
} else {
return false;
}
}
uploadFileWithDimensions(file: File, path: string, width: number, height: number, fileSize: number = 2, extensions: any = ['PNG', 'JPG']): boolean {
const reader = new FileReader();
reader.onload = (e: any) => {
const img = new Image();
img.onload = () => {
this.validateDimensions(img.width, img.height, width, height); // Call validation function
};
img.src = e.target.result;
};
reader.readAsDataURL(file);
let extension = file.name.split('.')[1].toLocaleUpperCase();
const fileSizeMB = file.size / (1024 * 1024); // Convert file size to MB
if (file) {
if (extensions.find(res => res.toLocaleUpperCase() === extension)) {
if (fileSizeMB < fileSize) {
if (this._validateDimensions) {
this._uploadFile(file, path).subscribe(url => {
this.localStorageService.set('file', url);
// Handle URL (e.g., save to database, display to user)
});
this.snackBarService.warning(this.translateService.instant('WARNING.UPLOAD_FILE'), '');
return true;
} else {
this.snackBarService.danger(this.translateService.instant('ERRORS.DIMENSIONS'), '')
return false;
}
} else {
this.snackBarService.danger(this.translateService.instant('WARNING.SIZE_10_LESS_THAN').replaceAll('10', fileSize.toString()), '');
return false;
}
}
else {
this.snackBarService.danger(this.translateService.instant('ERRORS.REJECT_EXTENSION'), '');
return false;
}
} else {
return false;
}
}
_validateDimensions: boolean = false;
validateDimensions(width: number, height: number, minWidth: number, minHeight: number) {
if (width !== minWidth || height !== minHeight) {
this._validateDimensions = false;
} else {
// Image dimensions are valid, proceed with upload logic (if applicable)
this._validateDimensions = true;
}
}
_uploadFile(file: File, path: string): Observable<string> {
const filePath = `${path}/${file.name}`;
const fileRef = this.storage.ref(filePath);
const uploadTask = this.storage.upload(filePath, file);
return new Observable<string>(observer => {
uploadTask.snapshotChanges().pipe(
finalize(() => {
fileRef.getDownloadURL().subscribe(url => {
observer.next(url);
observer.complete();
});
})
).subscribe();
});
}
}
الاستدعاء:
async dragAndDrop(event: any) {
const file: File = event[0];
let fileSizeInBytes: number = file.size / (1024 * 1024); // Example: 1 MB
let transferSpeedInBytesPerSecond: number = file.size; // Example: 1 KB/s
if (file) {
let action = this.uploadService.uploadFile(file, this.table);
const timeInSeconds = this.timeCalculator.calculateTimeInSeconds(fileSizeInBytes, transferSpeedInBytesPerSecond);
console.log(timeInSeconds);
if (action) {
setTimeout(() => {
this.data.image = this.localStorageService.get('file');
this.snackBarService.success(this.translateService.instant('SUCCESS.FILE_UPLOADED'), '');
}, timeInSeconds);
}
}
}
async uploadImage(event: any) {
const file: File = event.target.files[0];
let fileSizeInBytes: number = file.size / (1024 * 1024); // Example: 1 MB
let transferSpeedInBytesPerSecond: number = file.size; // Example: 1 KB/s
if (file) {
let action = this.uploadService.uploadFile(file, this.table);
const timeInSeconds = this.timeCalculator.calculateTimeInSeconds(fileSizeInBytes, transferSpeedInBytesPerSecond);
console.log(timeInSeconds);
if (action) {
setTimeout(() => {
this.data.image = this.localStorageService.get('file');
this.snackBarService.success(this.translateService.instant('SUCCESS.FILE_UPLOADED'), '');
}, timeInSeconds);
}
}
}
ملف وقت الانتظار لرفع الملفات:
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class _FileTimeCalculatorService {
constructor() { }
calculateTimeInSeconds(fileSizeInBytes: number, transferSpeedInBytesPerSecond: number): number {
if (transferSpeedInBytesPerSecond <= 0) {
return 0; // Prevent division by zero
}
return (fileSizeInBytes / transferSpeedInBytesPerSecond) + 5000;
}
}
تعليقات
إرسال تعليق