S3 CORS upload widget doesn't appear to be compatible with the bootstrap theme.
Description:

On clicking upload, I don't see any POST requests to s3fs_cors when using the bootstrap theme. See attached console screenshots (Bootstrap and Seven)

This is on a fresh install as follows:

Drupal 7.39
Bootstrap 7.x-3.0 - running Jquery 1.9
jQuery Update 7.x-3.0-alpha2
S3 File System 7.x-2.2
S3 File System CORS Upload 7.x-1.4

When I change to Bootstrap 7.x-3.1-beta3, I get the same results, except I get an additional Error Notification:

Notice: Trying to get property of non-object in bootstrap_file_widget() (line 21 of /srv/bindings/1eed2f94f30243b5a152e2b0c8cda445/code/sites/all/themes/bootstrap/templates/file/file-widget.func.php).

Possible Cause:

I think this is could be caused by the fact that Bootstrap file input elements are themed with a 'button' instead of an 'input'. See these two similar issues on other projects:

  • Element agnostic selection of submit button
  • """Choose file"" button is missing in Bootstrap theme

Proposed solution:

If this is likely the reason, in order to deal with this and possible other themes, add a configurable selector in line with the solution proposed here: Link.

See also http://cgit.drupalcode.org/dragdropfile/diff/?id=d35b41e

CommentFileSizeAuthor
#4 2590221-bootstrap-compat.patch4.89 KBfearlsgroove
#2 Bootstrap.jpg198.79 KBjohnkareoke
#2 Seven.jpg125.32 KBjohnkareoke

Comments

johnkareoke created an issue. See original summary.

johnkareoke’s picture

johnkareoke commented
Title: Incompatible with Bootstrap theme (and others?) » Incompatible with Bootstrap theme
Issue summary: View changes
StatusFileSize
new Seven.jpg125.32 KB
new Bootstrap.jpg198.79 KB
coredumperror’s picture

coredumperror commented

Shoot, I bet you're right. I wrote S3FS CORS based on another module, and what it did was take the existing file field render code, copy it, and tweak it into the CORS widget. With a different theme as the base file field code, I can totally see why it might have problems.

I'm afraid that I don't have the time to look into this right now, so I'd suggest sticking to the Seven theme, or not using S3FS CORS, for now.

fearlsgroove’s picture

fearlsgroove commented
StatusFileSize
new 2590221-bootstrap-compat.patch4.89 KB

It doesn't work with bootstrap because it's too specific about the markup it targets in JS. Patch attached is more generic, lightly tested but it works fine with Seven as well as bootstrap-based themes.

fearlsgroove’s picture

fearlsgroove commented
Status: Active » Needs review
coredumperror’s picture

coredumperror commented

What are all those changes of "input" to ":input" all about? I've never seen a colon used in a selector in that way before.

fearlsgroove’s picture

fearlsgroove commented

:input is a pseudo selector in jquery that matches any form elements. Part of the issue is that bootstrap replaces inputs with buttons. That means :input still matches but input does not.

https://api.jquery.com/input-selector/

coredumperror’s picture

coredumperror commented
Status: Needs review » Fixed

Ah, that makes perfect sense, then! I'll apply this patch forthwith.

  • coredumperror committed 901106a on 7.x-1.x 
    Issue #2590221: The widget now works when using a theme which customizes...
johnkareoke’s picture

johnkareoke commented

Thanks @fearlsgroove. Have tested and this resolves my issue.

Status: Fixed » Closed (fixed)

Automatically closed - issue fixed for 2 weeks with no activity.