Currently, I am working on integrating zip file upload feature into my Angular 8 application. There are 3 specific requirements that need to be met:
1. Only allow uploading of zip files; display an error message for other file types
2. Restrict the file size to be under 3 MBs; show an error message if it exceeds this limit
3. Upon selecting a zip file, display a progress bar but only initiate file upload via REST API call after clicking a separate 'Register' button.
Here is what I have implemented so far:File Upload Service
postFile(fileToUpload: File, header): Observable<any> {
const endpoint = 'your-destination-url';
const formData: FormData = new FormData();
formData.append('fileKey', fileToUpload, fileToUpload.name);
if (fileToUpload.size <= 3048576)
return this.httpClient.post(endpoint, formData, { headers: header })
.pipe(map(data => {
console.log(data);
return data;
},error => {
console.log(error, 'reduce file size');
}))
}
Component TS File
handleFileInput(files: FileList) {
this.fileToUpload = files.item(0);
}
uploadFileToActivity() {
this.fileUploadService.postFile(this.fileToUpload, this.headers).subscribe(data => {
// do something, if upload success
console.log('the file has been uploaded successfully', data);
}, error => {
console.log(error);
});
}
Component HTML
<input type="file"
id="file" (change)="handleFileInput($event.target.files)">
I would appreciate any suggestions on how to enhance my implementation to meet these specifications.