Hey guys, I am having issues with the upload progress bar showing actual progress when uploading files. I tested this on Chrome and Firefox on Windows 8.1
I am using a subtheme with minimal modification. Just some css overrides to the navbar colors.
My site is using Jquery Update and I have it set to version 1.7 and my server has the PECL uploadprogress library installed. The upload progress bar works perfectly in the default drupal admin theme.
Here is a screenshot of what it looks like in chrome. Which looks pretty much the same in FF.
This isn't a big deal for me. I can just allow the users to use the admin theme for now, but I thought I should post it and let you guys know.
Comment | File | Size | Author |
---|---|---|---|
#16 | Screen Shot 2015-03-17 at 4.22.jpg | 18.49 KB | glynster |
Comments
Comment #1
tim_ftw CreditAttribution: tim_ftw commentedComment #2
tim_ftw CreditAttribution: tim_ftw commentedI did a little bit more debugging and it appears as though the $key does not get passed to the file_ajax_progress function. So in turn, uploadprogress_get_info returns null every time.
https://api.drupal.org/api/drupal/modules!file!file.module/function/file...
Hope this helps!
Comment #3
rodvolpe CreditAttribution: rodvolpe commentedGetting the same error here.
It looks like bootstrap is putting the UPLOAD_IDENTIFIER after the field.
Comment #4
rodvolpe CreditAttribution: rodvolpe commentedComment #5
ReeceMarsland CreditAttribution: ReeceMarsland commentedI've located the problem. There are two separate issues that cause this bug:
1. Drupal.behaviors.fileButtons (file.js) attaches mousedown events to "div.form-managed-file input.form-submit" whereas bootstrap changes the submit buttons from input to button.
2. bootstrap_file_widget which overrides theme_file_widget renders the hidden elements after the file field itself where as the UPLOAD_IDENTIFIER hidden field has to appear before the file field in order to work. (https://bugs.php.net/bug.php?id=57505).
Fixing both the above issues resolves the problem.
I manually added the mousedown handlers in my custom js like so:
I then rendered the hidden elements first so that the UPLOAD_IDENTIFIER field was rendered before the file field.
....Really I should add a patch for this.
Comment #6
asimilon CreditAttribution: asimilon commentedI get this error when using the custom .js
http://i.imgur.com/5KAO9fm.png
I'm not sure where to start for a fix, if I remove the js then the upload progress bar appears but doesn't function
Comment #7
cavla CreditAttribution: cavla commentedComing back to this issue.
Have you patched this already?
I have tried your custom JS + PHP and no luck on my side.
Thanks
Comment #8
turtletrail CreditAttribution: turtletrail commentedi am getting the same as asimilon.
anyone managed to make progress bar work with bootstrap?
Comment #9
glynster CreditAttribution: glynster commentedSame here, I also applied the JS and setup the file-widget.func.php override within my theme. No change on my end. #ReeceMarsland would you be able to elaborate as to what else you may have done?
Comment #10
glynster CreditAttribution: glynster commentedDam looks like to additional help here
Comment #11
markhalliwellNow that my local is apache instead of nginx, I can properly test and fix this... eventually.
Comment #12
glynster CreditAttribution: glynster commentedDo you think this will be possible to resolve seeing as this is related to CGI vs FCGI? Apparently upload progress is not supported by FCGI.
Comment #15
markhalliwellI fixed the issue where the hidden element was appearing after the file input element. I also took the opportunity to fix some of the JS to append the progress to the correct element and fix some of the styling so it looks rather decent:
Edit: I am aware that the upload button appears to not fully encompass the width of the input group, unfortunately I did not see an easy fix considering that this is part of the Bootstrap framework which overrides the display property as table cells.
Comment #16
glynster CreditAttribution: glynster commentedDefinitely fixes part of the issue, as I now see the progress bar, however does not look like your themed version or show any progress. As mentions before I am using FCGI.
Comment #17
markhalliwell@glynster, I remember you saying that you had disabled the CDN before, which leads me to believe you must have a local compiled version of Bootstrap yes? If so, you will have to manually apply the styling additions into your LESS/SASS. The overrides.css file has only ever been loaded if the CDN is used.
Comment #18
markhalliwellAlso, FWIW, it could just be whatever caching mechanism (varnish, memcache, apc, etc.) that's in place has to timeout before certain file changes are fully recognized. This is one of the reasons I do not install these locally on my development environment; they tend to lead to false positives.
Comment #19
glynster CreditAttribution: glynster commentedAgain @markcarver, tnx for the fast reply. Yes I am using a compiled version of LESS however the starterkit theme already includes the overrides.less imported through style.less. I see you added new CSS to the latest version, so I copy and pasted this into my current version and the theming is now present. Should have thought to look their first!
Now if I switch to CGI the progress bar works as it should. FCGI just renders as the screenshot I supplied before.
Comment #20
glynster CreditAttribution: glynster commentedInteresting post that could help in some instances: https://www.drupal.org/node/2402147
Comment #21
markhalliwellFWIW, I did a little research. I didn't know all of this till just now, but apparently uploadprogress has had a long outstanding bug report of it not working with PHP FastCGI instances, only with mod_php: https://bugs.php.net/bug.php?id=58287
Given the lack of real interest in fixing this, I doubt it ever will be.
If you have to go the FastCGI route, maybe use Nginx and PHP-FPM with http://wiki.nginx.org/HttpUploadProgressModule? I had this before and it seemed to work, but I really didn't pay too much attention to it.
Regardless, there's really nothing I can do about it not working on Apache with FastCGI PHP, sorry :-/
Comment #22
malberts CreditAttribution: malberts commentedThere is a module that gets upload progress working with Nginx and PHP-FPM, at least for File fields.
https://www.drupal.org/project/filefield_nginx_progress
I am using Perusio's Nginx config so I haven't tried setting up the Upload module for Nginx, but his config plus that module should work (and I'm using the Bootstrap theme).
Comment #23
glynster CreditAttribution: glynster commented@malberts I actually installed this module which is a version for Apache and it works very well https://www.drupal.org/node/2402147 on the admin theme but not my Bootstrap sub-theme. I need to run some more tests to see if this is on my end.
Comment #24
glynster CreditAttribution: glynster commentedAh actually I spoke to soon, it does work but also breaks due to a JS issue. But with further development this will be a great option.