Skip to content
This repository has been archived by the owner. It is now read-only.

S3 JQuery Fineuploader - extraButtons element (when specified using class) only binds to the first element #1375

Closed
bs-thomas opened this Issue Mar 1, 2015 · 14 comments

Comments

Projects
None yet
2 participants
@bs-thomas
Copy link

bs-thomas commented Mar 1, 2015

I'd like to file an issue.

I'm using S3 JQuery Fineuploader (Version 5.1.3)

I've created a JS Fiddle:
http://jsfiddle.net/beamstyle_thomas/fyp5dqwt/3/

The symptom here, here, I specified the following as my options:

        extraButtons: [{
            element: $('.file-trigger')
        }]

However, when I have several file-trigger class elements in my DOM, only the first one gets converted into a fine-uploader button. The rest stays as-is.

Drop Zone
Drop Zone
Drop Zone

If possible, please kindly take a look into this issue.

Thanks!

Cheers,
Thomas

@bs-thomas

This comment has been minimized.

Copy link
Author

bs-thomas commented Mar 1, 2015

This problem still happens even on the non-Jquery version. I've ported over to the non-JQuery version as per Ray's advice.

@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Mar 1, 2015

Please show your code without the jquery wrapper as well

On Sat, Feb 28, 2015 at 10:15 PM, thomas83 notifications@github.com
wrote:

This problem still happens even on the non-Jquery version. I've ported over to the non-JQuery version as per Ray's advice.

Reply to this email directly or view it on GitHub:
#1375 (comment)

@bs-thomas

This comment has been minimized.

Copy link
Author

bs-thomas commented Mar 1, 2015

Hi Ray,

I've created a forked fiddle, here it is:
https://jsfiddle.net/beamstyle_thomas/heabz1bs/

Thanks!

@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Mar 1, 2015

You are explicitly only passing one extra button element in your fiddle, so I don't see any issue there.

@bs-thomas

This comment has been minimized.

Copy link
Author

bs-thomas commented Mar 1, 2015

Oh, I have 3 DIVs with class="file-trigger".

In my JS script, I did $('.file-trigger'). So I guess that should query all 3 DIVs correct? But only one gets captured.

Perhaps, did I misunderstand anything about its usage?

Cheers,
Thomas

@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Mar 1, 2015

You are explicitly accessing only the first element returned by the jquery selector in your fiddle.  That is what $(...)[0] does.

On Sun, Mar 1, 2015 at 9:53 AM, thomas83 notifications@github.com wrote:

Oh, I have 3 DIVs with class="file-trigger".
In my JS script, I did $('.file-trigger'). So I guess that should query all 3 DIVs correct? But only one gets captured.
Perhaps, did I misunderstand anything about its usage?
Cheers,

Thomas

Reply to this email directly or view it on GitHub:
#1375 (comment)

@bs-thomas

This comment has been minimized.

Copy link
Author

bs-thomas commented Mar 1, 2015

Ah yes you're right. However, it returns JS error if I remove the [0].

So I can't do this in a bundle for some reason.

@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Mar 1, 2015

Yes, of course it does.  You cannot pass a jquery object into fine uploader without the jquery wrapper.  You'll need to pass a separate extra button array item for each actual button element.

On Sun, Mar 1, 2015 at 9:57 AM, thomas83 notifications@github.com wrote:

Ah yes you're right. However, it returns JS error if I remove the [0].

So I can't do this in a bundle for some reason.

Reply to this email directly or view it on GitHub:
#1375 (comment)

@bs-thomas

This comment has been minimized.

Copy link
Author

bs-thomas commented Mar 1, 2015

Ah, I think I got what you mean. So you mean I cannot expect FineUploader to be iterating over my jquery object on either FineUploader versions (with and without the JQuery wrapper). And I would have to first build something like this:

var myExtraButtons = [
{
element: $('.file-trigger')[0]
},
{
element: $('.file-trigger')[1]
}
];

and then passing this into the FindUploader options:

FineUploaderS3({
...
extraButtons: myExtraButtons,
...
});

It seems like the above is working for me. But just to make sure, did I get your point correctly?

Cheers,
Thomas

@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Mar 1, 2015

Yes, that is correct.  

No real benefit to using jquery if you are only selecting elements.  It just gets in the way, as you can see here.  If you'd like to get more comfortable with the web and JavaScript outside of jquery, for instances such as this, have a look at my blog on the subject at http://blog.garstasio.com/you-dont-need-jquery/.

On Sun, Mar 1, 2015 at 10:07 AM, thomas83 notifications@github.com
wrote:

Ah, I think I got what you mean. So you mean I cannot expect FineUploader to be iterating over my jquery object on either versions. And I would have to first build something like this, and t:
var myExtraButtons = [
{
element: $('.file-trigger')[0]
},
{
element: $('.file-trigger')[1]
}
];
and then passing this into the FindUploader options:
FineUploaderS3({
...
extraButtons: myExtraButtons,
...
});
It seems like the above is working for me. But just to make sure, did I get your point correctly?
Cheers,

Thomas

Reply to this email directly or view it on GitHub:
#1375 (comment)

@bs-thomas

This comment has been minimized.

Copy link
Author

bs-thomas commented Mar 1, 2015

Thanks Ray! All good now and cleared out now.

Just one thought though, it might be nice to show an example or two on the documentation, especially for users who are using the JQuery wrapper, as they may tend to think they can simply just put in a JQuery object (of multiple elements) into that area.

Thanks again!

Cheers,
Thomas

@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Mar 1, 2015

Sure.  I'll investigate further during the workweek.

On Sun, Mar 1, 2015 at 11:22 AM, thomas83 notifications@github.com
wrote:

Thanks Ray! All good now and cleared out now.
Just one thought though, it might be nice to show an example or two on the documentation, especially for users who are using the JQuery wrapper, as they may tend to think they can simply just put in a JQuery object (of multiple elements) into that area.
Thanks again!
Cheers,

Thomas

Reply to this email directly or view it on GitHub:
#1375 (comment)

@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Mar 2, 2015

Looking again at the jQuery plugin wrapper code I wrote, only array elements that are also jQuery objects are expanded to take into account all elements that match the selector. In all other cases, the first element that matches the selector is used, and all others are discarded. I'll update the documentation to make this more clear.

@rnicholus rnicholus added this to the 5.2.0 milestone Mar 2, 2015

@rnicholus rnicholus added 3 - Doing and removed 2 - Do labels Mar 30, 2015

@rnicholus rnicholus added 5 - Done and removed 3 - Doing labels Mar 31, 2015

@rnicholus

This comment has been minimized.

Copy link
Member

rnicholus commented Apr 1, 2015

This marks the last planned task for 5.2.0. Integration testing will begin next, and once all is looking solid, 5.2.0 will be released.

@rnicholus rnicholus closed this in 0e3e4c1 Apr 16, 2015

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
You can’t perform that action at this time.