Dynamically create FileUploader #1063

New Issue

2018-12-03T08:14:09Z

komekh commented

2018-12-03 08:14:09 +00:00

(Migrated from github.com)

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"

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 commented

2019-06-14 07:02:19 +00:00

(Migrated from github.com)

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)

        }
    }

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 commented

2020-01-21 05:02:06 +00:00

(Migrated from github.com)

@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

@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

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#1063