Fixed ts-ignore
This commit is contained in:
parent
a4b6069789
commit
a0a096b9e7
@ -45,10 +45,12 @@
|
|||||||
<!-- Upload Button -->
|
<!-- Upload Button -->
|
||||||
<button class="btn btn-primary w-full max-w-xs" (click)="startUpload()">Upload File</button>
|
<button class="btn btn-primary w-full max-w-xs" (click)="startUpload()">Upload File</button>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Upload Progress -->
|
||||||
<div *ngIf="uploadStarted && fileToUpload && !uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-500">
|
<div *ngIf="uploadStarted && fileToUpload && !uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-500">
|
||||||
<div class="radial-progress" [style.--value]="uploadProgress" style="--size:12rem; --thickness: 2rem;" role="progressbar">{{ uploadProgress | number:'1.0-0' }}%</div>
|
<div class="radial-progress" [style.--value]="uploadProgress" style="--size:12rem; --thickness: 2rem;" role="progressbar">{{ uploadProgress | number:'1.0-0' }}%</div>
|
||||||
<p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
|
<p class="text-gray-700 mt-4">Uploading {{ fileToUpload.name }}...</p>
|
||||||
</div>
|
</div>
|
||||||
|
<!-- Upload Finished -->
|
||||||
<div *ngIf="uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-1000">
|
<div *ngIf="uploadFinished" class="flex flex-col items-center justify-center animate-in fade-in duration-1000">
|
||||||
<img class="w-16 mb-3" src="./assets/circle-check-solid.svg">
|
<img class="w-16 mb-3" src="./assets/circle-check-solid.svg">
|
||||||
<p class="text-gray-700 mb-3">File uploaded successfully!</p>
|
<p class="text-gray-700 mb-3">File uploaded successfully!</p>
|
||||||
|
@ -85,8 +85,12 @@ export class UploadComponent {
|
|||||||
'Access-Control-Allow-Origin': '*', // Allow CORS
|
'Access-Control-Allow-Origin': '*', // Allow CORS
|
||||||
},
|
},
|
||||||
onUploadProgress: (progressEvent: AxiosProgressEvent) => {
|
onUploadProgress: (progressEvent: AxiosProgressEvent) => {
|
||||||
// @ts-ignore
|
if (progressEvent.total) {
|
||||||
this.targetUploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
|
this.targetUploadProgress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
|
||||||
|
} else {
|
||||||
|
this.uploadProgress = 99; // Unable to compute progress since total size is unknown
|
||||||
|
console.error('Unable to compute progress since total size is unknown');
|
||||||
|
}
|
||||||
this.smoothProgressUpdate();
|
this.smoothProgressUpdate();
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
@ -94,6 +98,7 @@ export class UploadComponent {
|
|||||||
axios.post(this.developmentStore.getBaseUrl() + 'api/v1/upload', formData, config)
|
axios.post(this.developmentStore.getBaseUrl() + 'api/v1/upload', formData, config)
|
||||||
.then(response => {
|
.then(response => {
|
||||||
console.log('Upload completed successfully:', response.data);
|
console.log('Upload completed successfully:', response.data);
|
||||||
|
this.uploadFinished = true;
|
||||||
})
|
})
|
||||||
.catch(error => {
|
.catch(error => {
|
||||||
console.error('Upload failed:', error.response ? error.response.data : error.message);
|
console.error('Upload failed:', error.response ? error.response.data : error.message);
|
||||||
|
Loading…
x
Reference in New Issue
Block a user