Topic: Using File Upload with Amplify S3
Ay,
I'm trying to add https://mdbootstrap.com/docs/angular/forms/file-input/ to my Angular app.
But instead of doing :
startUpload(): void {
const event: UploadInput = {
type: 'uploadAll',
url: 'your-path-to-backend-endpoint',
method: 'POST',
data: { foo: 'bar' },
};
this.files = [];
this.uploadInput.emit(event);
}
And using a backend endpoint to POST my file, I want to use AWS Amplify storage :
this.amplifyService.storage().put(key, file, {
level: 'private',
contentType: archive.type
}).then(success => {
this.toastService.success('Upload success');
}).catch(error => {
this.toastService.error('Upload failed, retry or contact support');
}).finally(() => {
console.log('Finally');
});
How can I get file datas from MDB input ? I didn't manage to do it.
Note I'm a beginner in Angular development (I'm not a developper).
Thanks for your help.
AY,
Finally I managed to correctly upload file to S3. Here is the code, maybe it can help others :
startUpload(): void {
this.toastService.info('Starting upload, Don\'t refresh page or close tab');
const archive = this.files[0];
const key = `archives/${archive.name}`;
console.log(`Starting upload : ${key}, ${archive.type}`);
this.amplifyService.storage().put(key, archive.nativeFile, {
level: 'private',
contentType: archive.type
}).then(success => {
this.toastService.success('Upload success');
}).catch(error => {
this.toastService.error('Upload failed, retry or contact support');
}).finally(() => {
this.loading = false;
});
this.files = [];
}
I wasn't using nativeFile object from file object. So what I was sending to S3 was only a json object representing my file but not its content. :)
I hope it helps somebody else.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Angular
- MDB Version: 9.3.1
- Device: PC
- Browser: Brave
- OS: Linux
- Provided sample code: No
- Provided link: Yes