Tips for accepting numerous images in a Angular 4 application through Web Api

As a newcomer to Angular 4 and Web API, I am currently working on uploading multiple images from an Angular 4 application to the Web API.

While I have successfully received the images in the API and can see the count of uploaded images during debugging, I am facing an issue when trying to save the images in a folder. Only one image is being stored and in the database, all image paths are showing the same path.

During debugging, I noticed that all the images in the foreach loop are displaying the same image name.

In my service.ts file for Angular 4:

 ImageInsert(mObject, mImage) {
        const formData: FormData = new FormData();
        formData.append('mFormData', JSON.stringify(mObject));
        for (const file of mImage) {
          formData.append('ImageFile', file, file.name);
        }
        return this.http.post(this.BASE_URL + `/api/ImageInsert`, formData)
      }

If anyone has any insights or solutions to help me resolve this issue, it would be greatly appreciated.

Answer №1

Upon reviewing the service file, I realized that I made a mistake.

ImageInsert(mObject, mImage) {
        const formData: FormData = new FormData();
        formData.append('mFormData', JSON.stringify(mObject));
        for (const file of mImage) {
          formData.append('ImageFile'+file.name, file, file.name); //It is important to use unique key names for each formData entry
        }
        return this.http.post(this.BASE_URL + `/api/ImageInsert`, formData)
      }

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

What is the reason behind MongoDB update only impacting a single document?

My collection has a specific "schema" set up like this: { "_id": { "$oid": "543cd94799c3ff7a2850a1b6" }, "Type": 1, "Information": [ { "Type" : 2, "Colors": [], "Heights": [], "Widths": [] } ] } Within my ...

Warning BG8605: The Java type '$' does not exist in the api.xml class-parse binding

Attempting to establish C# bindings for 'mcumgr-ble.aar' All dependencies of the .aar file have been downloaded: kotlinx-coroutines-android.jar kotlinx-coroutines-core-jvm.jar kotlinx-coroutines-core.jar kotlinx-coroutines-debug. ...

What is the process for authenticating and sending a click conversion to Google Ads using a service account and the REST API with TypeScript?

I have attempted to authenticate using this documentation and to send conversions via REST API using this REST endpoint due to the absence of a Typescript/Javascript Client Library. However, I am encountering authentication issues. Once resolved, I aim to ...

I am encountering challenges with React.js implemented in Typescript

Currently, I'm grappling with a challenge while establishing a design system in ReactJS utilizing TypeScript. The issue at hand pertains to correctly passing and returning types for my components. To address this, here are the steps I've taken so ...

Numerous Customers Sharing a Single Server

Being new to GUIs, I've encountered an issue in my client-server program. The program functions as a "customer support" platform where multiple clients can access it from different computers simultaneously. The problem arises when one client makes ch ...

The variable 'HttpEvent<name[]>' cannot be assigned to the variable 'name[]' because their types are not compatible

This is the code I have written: export interface act { id: number; name: string; } public list!: act[]; getAll(token:any): void{ this.http.get<act[]>('http://localhost:4200/test', token) .subscribe( (val) => this. ...

`Using RxJS and Angular's async pipe to manage error handling in applications`

Currently, I am utilizing Angular and RxJS to develop some reactive applications. Upon further exploration, I have come to understand that effective use of reactive programming does not heavily rely on ".subscribe," as it resembles imperative programming ( ...

"Exploring the process of setting up a custom environment for ng serve in Angular

According to the angular 6 readme: ## Development server Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The app will automatically reload if you change any of the source files. Prior to version 6, I used to run this command for m ...

The HTTP GET request was successful, however, there is no data being displayed on the screen

I am currently facing an issue with fetching data from a web server. The data is retrieved successfully as I can see the object in the console log, but it does not render in the component template. export class CountrydetailsComponent implements OnInit { ...

Name the x-axis with the days of the week

I have been working on visualizing data using a chart. While I have successfully created an hourly visualization, I am now trying to do the same for daily intervals ranging from Monday to Sunday. Can someone provide guidance on how I can achieve this for ...

Type of Angular Service Issue: string or null

I'm encountering a persistent issue with my Angular code, specifically while calling services in my application built on Angular 13. The problem arises when trying to access the user API from the backend, leading to recurrent errors. Despite extensive ...

Transferring multiple parameters between components using Navigate and ParamMap

My concern is that I'm unsure of how to pass multiple parameters through the component's route. I need to send two attributes. Is there a specific syntax required in defining the route? Below is my desired functionality for passing the attribut ...

Please input the number backwards into the designated text field

In my react-native application, I have a TextInput where I need to enter numbers in a specific order such as 0.00 => 0.01 => 0.12 => 1.23 => 12.34 => 123.45 and so on with each text change. I tried using CSS Direction "rtl" but it didn' ...

Is there a method in C# .NET to track the memory consumption of individual classes or object types while the application is running?

My C# .NET application is hosted on Heroku in the cloud, and I am encountering memory leaks at times. I need a way to monitor my app's memory usage in detail during runtime, as it is not possible to debug the remote process. It would be very helpful ...

Looping through an array using NgFor within an object

I've been working on pulling data from an API and displaying it on a webpage. Here is the JSON structure: {page: 1, results: Array(20), total_pages: 832, total_results: 16629} page: 1 results: Array(20) 0: adult: false backdrop_path: "/xDMIl84 ...

Ways to encourage children to adopt a specific trait

Let's discuss a scenario where I have a React functional component like this: const Test = (props: { children: React.ReactElement<{ slot: "content" }> }) => { return <></> } When a child is passed without a sl ...

Automatically inserting dashes in text box entries for validation purposes

I'm currently working on a piece of code that needs validation, but I'm struggling to achieve the desired outcome. I want the input to follow this format 12-12345-1-1. Is it possible to automatically add dashes when the user types in the text box ...

Tab-less WPF Tab Control - A Unique User Interface

I'm interested in creating a control that functions like a tab control, but without the traditional "TabStrip" component. Instead, I would like to be able to change the tabs using a combo box. How can I achieve this? I'm sure there's a solu ...

Unable to automatically redirect to portal upon submission of form

After successfully logging the user into my app, I want to redirect them imperatively to the portal page. However, when I use the router.navigate() function, a few things happen that are causing issues. First, the app redirects to /portal. Then, it immedia ...

What steps can I take to prevent encountering a Typescript Error (TS2345) within the StatePropertyAccessor of the Microsoft Bot Framework while setting a property?

During the process of constructing a bot in Typescript, I encountered TS2345 error with Typescript version 3.7.2. This error is causing issues when attempting to create properties dynamically, even if they are undefined, or referencing them in the statePro ...