Looking for a more efficient method to batch upload numerous images to an Amazon S3 bucket within an Angular application?

inventory.service.ts I have made some progress in my service file by implementing the functionality to upload a single 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 My inventory form needs to be able to upload an array of images to an S3 bucket and then include the uploaded details in a POST request. Currently, I have only implemented the functionality for uploading a single 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;
            });

Answer №1

After carefully studying their guidelines, this is the approach I took to implement it.

uploadFile(file) {
  const bucket = this.getS3Bucket();
  const parameters = {
    Bucket: this.bucketName,
    Key: `${this.folderName}/${file.name}`,
    Body: file,
    ContentType: file.type,
  };
  bucket
    .upload(parameters)
    .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 = 'An error occurred while uploading your file';
        return false;
      } else {
        this.fileProgress = 100;
        this.message = 'Upload Successful'
        return true;
      }
    });
}

I have also included a progress bar for monitoring upload progress.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Angular 7: Implementing a Dynamic Search Filtering System

I'm looking to create a versatile filter in Angular 7 that can perform search operations on any field across multiple screens. Custom pipe filters I've come across only seem to work with specific static fields, limiting their use. Let me provide ...

The functionality of http.delete is smooth when tested on Postman, but encountering issues on Angular 4/Ionic 3 application

I am new to working with the Angular 2/Spring boot stack, so please bear with me as I navigate through this. I have implemented an http.delete method for deleting a specific row selected by the user with a confirmation alert. While the API request works p ...

Enhancing the Angular Community Library Project

I am currently working on an Angular project version 7.1 and have developed 2 angular libraries that are being used in the project. In order to upgrade my project from version 7.1 to 8.2, I used the following command: ng update @angular/cli@8 @angular/core ...

Ways to invoke main.ts to communicate with an Angular component using Electron

I have a good understanding of how to communicate between an angular app and the electron main thread using IPC. However, in my current scenario, I have threads running in the electron main thread for video processing. After these threads complete their t ...

What is the most effective method for assessing a service using angular?

As a beginner in angular testing, I am eager to start creating tests for my service. However, I have encountered an issue where my service (foo) injects another service (bar) in its constructor. Should I create a mock for bar? Do I need to mock every func ...

Exploring Angular 7: Leveraging class inheritance and the powerful httpClient

It has come to my attention that my services are quite repetitive. In an attempt to enhance them, I decided to delve into super classes and inheritance in Angular. However, I have been struggling with the constructor and super calls. Despite TypeScript com ...

The IntrinsicAttributes type does not include the property 'path' in the Preact router

I am facing a challenge while developing my website using preact router. Every time I try to add something to the router, I encounter an error stating "Property 'path' does not exist on type 'IntrinsicAttributes'." Despite this error, t ...

What is the proper way to deactivate ngbRadioGroup functionality?

Currently implementing ng-bootstrap radio buttons with Reactive Forms and custom controls utilizing ControlValueAccessor, I am in search of the proper method to disable the entire ngbRadioGroup. In Reactive Forms, disabling it is achieved by using .disabl ...

What is the best way to customize the styles of Material UI V5 Date Pickers?

Attempting to customize Mui X-Date-Pickers V5 through theme creation. This particular component is based on multiple layers. Interested in modifying the borderColor property, but it's currently set on the fieldset element, so need to navigate from Mu ...

Utilizing Angular 2 Services for Seamless Data Sharing Among Components

I am currently working on implementing a service that will help me define a shared resource called client across multiple views. The process involves selecting the client from an index and then setting it up as follows: itemTapped(event, client) { this. ...

Generate dynamic forms utilizing JSON data

I am in the process of developing an application that enables users to answer questions about themselves. The questions are being retrieved from an API. My next step is to generate a form with these questions as entry fields. I am currently utilizing a met ...

Getting an error message like "npm ERR! code ENOTFOUND" when trying to install Angular CLI using the command "

Currently, I am eager to learn Angular and have already installed Node version 18.13.0. However, when attempting to install Angular CLI using the command npm install -g @angular/cli, I encountered an issue: npm ERR! code ENOTFOUND' 'npm ERR! sys ...

Optimizing Angular app routing for SEO on Cloudfront

I am currently working on an SPA application built in Angular 7. In addition, I have a Java application that operates REST services and is deployed on ElasticBeanstalk with a load balancer. My goal is to utilize CloudFront and S3 for hosting the frontend p ...

Error: The function list.forEach does not exist within service.buildList [as project]

Today, I've been grappling with a challenging issue. As someone new to Typescript and Angular, I'm attempting to make a call to my backend API. However, when trying to populate an array for display, I keep encountering an error that says rawRegis ...

Enhanced assistance for optional chaining operator available in Visual Studio Code

React Native 0.56 now supports the Optional Chaining Operator with ?. Unfortunately, the latest stable version of VS Code does not recognize this syntax and displays a TypeScript validation error: [ts] Expression expected. No compile-time or eslint erro ...

Tips for Sending Variables in HTTP Requests in Angular 9

'''Is there a way to pass fromDateTime and toDateTime as parameters in this link?''' export function MSALInterceptorConfigFactory(): MsalInterceptorConfiguration { const protectedResourceMap = new Map<string, Array& ...

Error! Element not found in cloned iframe #2460, promise unhandled

Can you help me troubleshoot this issue? This is the code I'm working with: const section = document.createElement("section"); const myHTMLCode = "<p>Greetings</p>"; section.insertAdjacentHTML("afterbegin", my ...

Exploring Typescript: Simulating Nested Classes and Accessing Private Members

Previous solutions regarding typescript and nested classes often recommended utilizing the declaration merging feature of the language. I've experimented with this approach using the code snippet below, which functions correctly but triggers a compile ...

Using the hash(#) symbol in Vue 3 for routing

Even though I am using createWebHistory, my URL still contains a hash symbol like localhost/#/projects. Am I overlooking something in my code? How can I get rid of the # symbol? router const routes: Array<RouteRecordRaw> = [ { path: " ...

Looping issue with ForEach in Typscript with Firebase Functions

While browsing through various questions on this topic, I've noticed that the specific answers provided don't quite fit my situation. My query involves converting a Google Firebase RTB datasnapshot into an array of custom objects, each representi ...