Pass multiple itemAlias per single FileUploader #607

New Issue

2017-02-02T12:33:05Z

neoswf commented

2017-02-02 12:33:05 +00:00

(Migrated from github.com)

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!

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!

👍 5

madreloidpx commented

2019-08-16 00:01:12 +00:00

(Migrated from github.com)

@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)

@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)`

cda963 commented

2020-06-14 10:14:54 +00:00

(Migrated from github.com)

@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; }

@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; } `

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#607