Multiple uploaders on a single page...

[derailed]

Hi,

I am trying to use your nice lib to get multiple uploaders on a single page. Each uploader resolve to a different backend server url. Say I have uploader1 with url set to /loader1 and uploader2 with url set to /loader2. No matter what I've tried. it seems that the second file input (uploader2) is somehow binding to uploader1. Ie using your demo table to show the files to be uploaded, always appear on the first loader but not the second. Doing the actual upload the files destined for uploader2 end up being uploaded on /loader1 url. What am I missing?

Thank you!

[EduardsE]

Having the same issue. Did you manage to resolve this?

[adrianfaciu]

Can you provide some sample code to reproduce this problem ?

[Shiroh1ge]

I am facing the same issue. I think it's connected to the ng2FileSelect directive. If you have multiple uploaders on the same page, only one will be targeted when selecting a file. The temporary solution for me is to only use drag and drop, but that's really inconvenient.

[rsaf]

I'm Having the same problem. Multiple ng2FileSelect directives, defined to upload to different paths, But only one is being use, regardless of which one is being clicked. !!

In my case the directives are actually defined in different components, and those components are available as sub components on the same page.

Any solution to this?

[EduardsE]

@rsaf To make it work, I added a custom ID to each input and corresponding label.

<input type="file" name="file" id="{{ 'file' + iterator}}" #fileInput ng2FileSelect [uploader]="uploader" class="inputfile"/> <label for="{{ 'file' + iterator}}">Choose a file</label>

[rsaf]

@EduardsE Thank you so much.

I got it working.

The problem was indeed the id field. I was using the same ID for different file inputs. I didn't pay attention to that because I was using each file input on a different component.

I think the documentation needs to emphasize that it's using the ID field to find the uploader! Which seems to be a major issue.

[cylof22]

Two different ids are used for the two different file input. However, the size of the selected file size is always zero for the second file input. The following are the two input type.

<input type="file" accept="image/*" style="display:none" id="contentUpload" ng2FileSelect [uploader]="contentUploader" (change)="OnContentChange($event)">

<input type="file" multiple accept="image/*" style="display:none" id="styleUpload" ng2FileSelect [uploader]="styleUploader" (change)="OnStyleChange($event)">

[EduardsE]

@cylof22 Does it work without the "multiple" attribute?

[cylof22]

@EduardsE Removing the "multiple" will fix the problem. Thanks for your answer. However, I think this is bug.

[NeelBhatt]

How to get the ID of the uploader in the event like OnAfterAddingFile? I am wondering how to know which file is uploaded by which uploader if there are more than one uploader in single page?

[vishnu-dev]

Have separate uploader variable for each of your uploaders. Eg. imageUploader, videoUploader. @NeelBhatt. Have separate listeners for each of these. Also have separate id to tell the DOM to distinguish the inputs.