ng2-file-upload icon indicating copy to clipboard operation
ng2-file-upload copied to clipboard

Pass multiple itemAlias per single FileUploader

Open neoswf opened this issue 8 years ago • 2 comments

Right now, we can pass only one itemAlias per FileUploader.

In my usage case scenario, my API is expecting to get different name for each document I'm sending to it. For example: <imput type="file" name="passport"> & <imput type="file" name="family_photo">.

As I understand ng2-file-upload right now, the only way I can achieve that is by creating multiple FileUploaders, something like that:

this.uploaderPassport = new FileUploader({url: URL, itemAlias: 'data[attributes][passport]'}); this.uploaderFamilyPhoto = new FileUploader({url: URL, itemAlias: 'data[attributes][family_photo]'});

Does exist another way of resolving that? Thank you!

neoswf avatar Feb 02 '17 12:02 neoswf

@neoswf I was able to make a workaround by creating a different FileUploader for each alias, then queuing to a main FileUploader

eg: uploader: FileUploader = new FileUploader({ url: 'http://localhost:3000/endpoint' }); fooUploader: FileUploader = new FileUploader({ url: 'http://localhost:3000/endpoint', itemAlias: 'foo' }); barUploader: FileUploader = new FileUploader({ url: 'http://localhost:3000/endpoint', itemAlias: 'bar' });

then inside ngOnInit(): this.fooUploader.onAfterAddingFile = (fileItem) => this.uploader.queue.push(fileItem) this.barUploader.onAfterAddingFile = (fileItem) => this.uploader.queue.push(fileItem)

madreloidpx avatar Aug 16 '19 00:08 madreloidpx

@madreloidpx Another way of solving this issue (without using multiple instances of FileUploader) is to make use of the "onFileSelected" event, like this:

In HTML: <input type="file" id="photo" ng2FileSelect [uploader]="fileUploader" (onFileSelected)="onFileSelected($event, 'photo')">

In Typescript, simply lookup in the upload queue the file that has just been added and change its alias: onFileSelected(fileList: FileList, itemAlias: string) { this.fileUploader.queue.find(x => x.file.name === fileList[0].name).alias = itemAlias; }

cda963 avatar Jun 14 '20 10:06 cda963