Is there a better way to upload multiple images to Amazon S3 bucket in an Angular project

user_9887947 0
Viewed 358

inventory.service.ts This is what i have implemented so far in my service file. It was just to upload one image file.

public uploadImage(file: File, fileName): Promise<ManagedUpload.SendData> {
    const contentType = file.type;

    const params = {
      Bucket: environment.bucketName,
      Key: fileName,
      Body: file,
      ACL: "public-read",
      ContentType: contentType
    };
    return this.bucket.upload(params, (err, data) => {
      return !err;

    }).promise();
  }

inventoryForm.ts In my inventory form i want to upload an array of images to S3 bucket and get that uploaded details and append to my POST request. This is what i have implemente to upload just one image


     this.imageService.uploadImage((this.imageFile?.item(0)), fileName)
            .then((data) => {
              this.toastrService.showSuccessToastr("Image was successfully added");
              this.inventoryImage = {
                url: data.Location,
                key: data.Key
              };
              this.submitRequest();
            }).catch((error) => {
              this.toastrService.showErrorToastr("Error occurred while uploading image ");
              this.loading = false;
            });
angular typescript amazon-s3
1 Answers

Following their documention, this is how I implemented it.

uploadFile(file) {
  const bucket = this.getS3Bucket();
  const params = {
    Bucket: this.bucketName,
    Key: `${this.folderName}/${file.name}`,
    Body: file,
    ContentType: file.type,
  };
  bucket
    .upload(params)
    .on('httpUploadProgress', (progress: S3.ManagedUpload.Progress) => {
      file.progress = (progress.loaded / progress.total) * 100;
      this.fileProgress = file.progress;
    })
    .send((err: AWSError, data: S3.ManagedUpload.SendData) => {
      if (err) {
        this.fileProgress = 0;
        this.message = 'There was an error uploading your file';
        return false;
      } else {
        this.fileProgress = 100;
        this.message = 'Uploaded Successfully'
        return true;
      }
    });
}

I am also showing progress.

user_132989270
Related