Topic: Using File Upload with Amplify S3

Nicolas Hug free asked 3 years ago


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.


Nicolas Hug free answered 3 years ago


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.



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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