2

I'm trying to build a form in angular in which i will upload 2 different photos.

I am using 'multer' on nodejs and 'ng2-file-upload' in angular.

I need a unique identifier for each photos in order to be able to handle them right.

multer is set to work with the html name attribute. The problem is that ng2-file-upload is changing by default the attribute name of the input type file - to the string file.

When i try to run this code:

Node.js:

const upload = multer({
    storage
    }).fields([
       { name: 'posterPic'},
       { name: 'widePic'}
  ]);

Angular:

<div class="form-group">
    <input type="file" id="posterPic" [name]="posterPic" ng2FileSelect [uploader]="uploader">
</div>
 <div class="form-group">
    <input type="file" id="widePic" [name]="widePic" ng2FileSelect [uploader]="uploader">
 </div>

While uploading - 'ng2-file-upload' is changing the name="posterPic" and name="widePic" to name="file".

Error:

{ [Error: Unexpected field]
  code: 'LIMIT_UNEXPECTED_FILE',
  field: 'file',
  storageErrors: [] }

Anybody know how can i change ng2-file-upload default behavior to change the name attribute of the file input to 'file'?

Many thanks!

p.s

Telling multer to accept any() will not help me. i need to be able to identify this 2 different input.

codingnighter2000
  • 497
  • 1
  • 7
  • 24

1 Answers1

1

Just ran into the same issue and there is an easy workaround to overcome this.

Just before you upload your file change the FileItem alias attribute and this will change the form-data name attribute value.

So for example in your view:

<input type="file" (onFileDrop)="startUpload()" ng2FileSelect [uploader]="uploader">

and in your component:

startUpload(){
    this.uploader.queue[0].alias = "posterPic"  // Or your file name
    this.uploader.queue[0].upload()
}

Solution was taken from here.

velval
  • 3,072
  • 36
  • 45