How to use Angular 8 Form Builder to upload an array of multiple images

Question

How to use Angular 8 Form Builder to upload an array of multiple images

My product form includes various fields like product name, description, and an array of images.

Product Form

Product Name - Product Description

Product Purity - Product Commodity

Images (Add)

Checkbox 1 - Image 1

Checkbox 2 - Image 2

Checkbox 3 - Image 3.

...

I can successfully save the product name, product description, and other fields in my database, but I am unsure how to upload those images. The images are generated by clicking the add button, and there may be one or multiple images based on requirements. I have created the form using a Form Builder. Below is my code:

Template :

<form  class="kt-form kt-form--group-seperator-dashed" [formGroup]="mmgForm">
      <!-- Form content here -->
  </form>

Ts File :

// TypeScript code here

javascript angular typescript angular8

Answer 1

Answer №1

To address this issue, my recommendation would be to establish a specific FileUploadService.

The approach taken by the Service:

uploadFiles(Array<File> files): Observable<FileUploadResponse> {
    const url = `your-upload-url`;

    const formData: FormData = new FormData();

    for(File file in files) {
        formData.append('file', file, file.name);
    }

    return this.http.post<FileUploadResponse>(url, formData /*{headers if necessary}*/);
}

Your component.ts:

//[..]
Array<File> files = [];

onFileInputEvent(event: any) {
  for(let i = 0; i < event.srcElement.files.length; i++) {
    this.fileName = event.srcElement.files[0].name;
    this.files.push(event.srcElement.files[0]);
  }
}

uploadFiles(){
  this.fileUploadService.uploadFile(this.file).subscribe(res => { // do something}, err =>{});
}

Your component.html:

<!-- [..] -->
<input id="fileInput" placeholder="Images" type="file" (change)="onFileInputEvent($event)" accept=".jpg">

Enhance the input elements for a more visually appealing look:

<div class="file-input">
    <input id="fileInput" placeholder="CSV-Datei" type="file" class="hidden" (change)="onFileInputEvent($event)" accept=".csv">
    <label for="fileInput" class="mat-raised-button">Add images</label>
    <mat-chip-list *ngIf="fileName">
        <mat-chip [removable]="true" (removed)="remove()">
            {{fileName}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

Answer 2

To address this issue, my recommendation would be to establish a specific FileUploadService.

The approach taken by the Service:

uploadFiles(Array<File> files): Observable<FileUploadResponse> {
    const url = `your-upload-url`;

    const formData: FormData = new FormData();

    for(File file in files) {
        formData.append('file', file, file.name);
    }

    return this.http.post<FileUploadResponse>(url, formData /*{headers if necessary}*/);
}

Your component.ts:

//[..]
Array<File> files = [];

onFileInputEvent(event: any) {
  for(let i = 0; i < event.srcElement.files.length; i++) {
    this.fileName = event.srcElement.files[0].name;
    this.files.push(event.srcElement.files[0]);
  }
}

uploadFiles(){
  this.fileUploadService.uploadFile(this.file).subscribe(res => { // do something}, err =>{});
}

Your component.html:

<!-- [..] -->
<input id="fileInput" placeholder="Images" type="file" (change)="onFileInputEvent($event)" accept=".jpg">

Enhance the input elements for a more visually appealing look:

<div class="file-input">
    <input id="fileInput" placeholder="CSV-Datei" type="file" class="hidden" (change)="onFileInputEvent($event)" accept=".csv">
    <label for="fileInput" class="mat-raised-button">Add images</label>
    <mat-chip-list *ngIf="fileName">
        <mat-chip [removable]="true" (removed)="remove()">
            {{fileName}}
        <mat-icon matChipRemove>cancel</mat-icon>
    </mat-chip>
</mat-chip-list>

How to use Angular 8 Form Builder to upload an array of multiple images

Product Form

Answer №1

Similar questions

Is it possible to change XML using Ajax technology?

Tips for broadcasting the blob

What is the reason behind the failure of this code to check for anagrams?

What is causing my Node JS app to only show the initial JSON object?

Replicated shadows brought to life in three.js

What is the best way to include temporary attributes on a mongoose object solely for the purpose of a response, without saving them to the database

execute a script using an npm module

Is there a way to determine if the current path in React Router Dom v6 matches a specific pattern?

Is there a way I can invoke my function prior to the form being submitted?

Angular Recurring Request

Having issues with the custom listing feature in Jquery UI auto complete not functioning as expected

The React component fails to display updates following a state change

Are there any find all functions available in JavaScript that are built-in?

When utilizing res.redirect in Express, an error is triggered stating "Uncaught SyntaxError: Unexpected token <""

retrieving information via AJAX call using jQuery

I am looking to create a unique JavaScript variable within my GTM container that will automatically return a value of true when the user approves sharing

"Continue to shine until the rendering function displays its source code

The issue of declaration merging and complications with nested node_modules

The Angular component is failing to display the template

How to enable drag-and-drop functionality for an iframe?