ng2-file-upload
ng2-file-upload copied to clipboard
Pass multiple itemAlias per single FileUploader
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 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 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; }