Multiple uploaders on a single page... #869

New Issue

2017-08-17T21:57:45Z

derailed commented

2017-08-17 21:57:45 +00:00

(Migrated from github.com)

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!

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!

👍 7

EduardsE commented

2017-09-06 09:00:28 +00:00

(Migrated from github.com)

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

adrianfaciu commented

2017-10-01 10:26:05 +00:00

(Migrated from github.com)

Can you provide some sample code to reproduce this problem ?

Shiroh1ge commented

2017-11-01 13:27:56 +00:00

(Migrated from github.com)

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 commented

2017-12-06 05:51:11 +00:00

(Migrated from github.com)

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?

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 commented

2017-12-06 07:52:13 +00:00

(Migrated from github.com)

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

👍 1

rsaf commented

2017-12-07 03:47:01 +00:00

(Migrated from github.com)

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

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

👍 1

cylof22 commented

2018-03-20 08:57:38 +00:00

(Migrated from github.com)

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.

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 commented

2018-03-20 11:12:59 +00:00

(Migrated from github.com)

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

cylof22 commented

2018-03-20 12:33:01 +00:00

(Migrated from github.com)

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

👍 1

NeelBhatt commented

2018-09-27 13:33:23 +00:00

(Migrated from github.com)

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?

👍 3

vishnu-dev commented

2020-01-10 06:51:12 +00:00

(Migrated from github.com)

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.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: dc/ng2-file-upload#869