Dynamically create FileUploader

[komekh]

Hi I need to use single file upload property multiple times in a single page. I am reading data from database and I need to upload multiple files like "driving license", "personal photo" etc, these datas comes from database.
<div *ngFor="let form of customForms; let i = index" style="width:100%"> <div fxLayout="row"> <div style="width:15%">{{form.name}} *** {{form.extentionsList}}</div> <div style="width:15%" *ngIf="form.mandatory" [id]="form.inputId" style="color:red">(*)</div> </div> <input type="file" name="{{ 'file' + i+1}}" id="{{ 'file' + i+1}}" #fileInput{{i+1}} ng2FileSelect [uploader]="uploader" class="inputfile" (change)="OnContentChange($event)"/>

when I upload files, the files dublicates the files for each area. So how can I create FileUploader dynamically so I can use it like this [uploader]="dynamicallyCreatedUploader"

[keithics]

I have the same problem.. i solved it like this..

public uploader: FileUploader[] = [];

......

private setupUploaders() {

    const uploaderFields = this.getUploaderFields();

    uploaderFields.forEach((uploaderField) => {
        // must be an array since form can have multiple uploaders
        this.uploader[uploaderField] = new FileUploader({url: ENDPOINT + '/upload/' + uploaderField, itemAlias: 'photo'});
        this.uploader[uploaderField].onAfterAddingFile = (file) => { file.withCredentials = false; };
        this.uploader[uploaderField].onCompleteItem = (item: any, response: any, status: any, headers: any) => {
            const data = JSON.parse(response);
            if (status === 200) {
                console.log(item);
                console.log(data.type);
                //   this.baseForm.get('')
            } else {
                this.message = {
                    type: 'danger',
                    message: 'Uploaded failed :' + data.message,
                    title: 'Error: ',
                    status
                };
            }
        };


    });

}

backend..

    import {UploadController} from "../controllers/upload.controller";
    
    export class UploadRoutes {
    
        public uploadController: UploadController = new UploadController()
    
        public routes(app): void {
    
            app.route('/upload/:type').post(this.uploadController.process)
    
        }
    }

controller

    import { Request, Response } from 'express';
    import {_} from 'lodash';
    import * as   Resize from '../libraries/Resize';
    
    export class UploadController{
    
        public process(req: Request, res: Response){
                //req.params.type == type is pass as response back to angular
                 Resize.resize(req, res,req.params.type);
               // inside the Resize class.. snippet below..
               // response.type = type;
  
               // res.send(response)

        }
    }

[balarajuyogesh]

@keithics Could you please provide this.getUploaderFields(); this code sample. If possible could you please create a gist of all the codes involved related to Dynamic FileUploader .. including html, ts, service, css