Upload progress bar doesn't show using PECL

Getting the same error here.
It looks like bootstrap is putting the UPLOAD_IDENTIFIER after the field.

I'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:

/**
 * Attach behaviors to the file upload and remove buttons.
 */
Drupal.behaviors.fileButtonsBootstrap = {
  attach: function (context) {
    $('input.form-submit', context).bind('mousedown', Drupal.file.disableFields);
    $('div.form-managed-file .form-submit', context).bind('mousedown', Drupal.file.progressBar);
  },
  detach: function (context) {
    $('input.form-submit', context).unbind('mousedown', Drupal.file.disableFields);
    $('div.form-managed-file .form-submit', context).unbind('mousedown', Drupal.file.progressBar);
  }
};

I then rendered the hidden elements first so that the UPLOAD_IDENTIFIER field was rendered before the file field.

/**
 * @file
 * file-widget.func.php
 */

/**
 * Overrides theme_file_widget().
 */
function bootstrap_file_widget($variables) {
  $element = $variables['element'];
  $output = '';

  $hidden_elements = array();
  foreach (element_children($element) as $child) {
    if ($element[$child]['#type'] === 'hidden') {
      $hidden_elements[$child] = $element[$child];
      unset($element[$child]);
    }
  }

  $element['upload_button']['#prefix'] = '<span class="input-group-btn">';
  $element['upload_button']['#suffix'] = '</span>';

  // The "form-managed-file" class is required for proper Ajax functionality.
  $output .= '<div class="file-widget form-managed-file clearfix input-group">';
  if (!empty($element['fid']['#value'])) {
    // Add the file size after the file name.
    $element['filename']['#markup'] .= ' <span class="file-size">(' . format_size($element['#file']->filesize) . ')</span> ';
  }
  $output .= render($hidden_elements);
  $output .= drupal_render_children($element);
  $output .= '</div>';

  return $output;
}

....Really I should add a patch for this.

I 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

Coming back to this issue.

Have you patched this already?

I have tried your custom JS + PHP and no luck on my side.

Thanks

i am getting the same as asimilon.

anyone managed to make progress bar work with bootstrap?

Same 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?

Dam looks like to additional help here

Now that my local is apache instead of nginx, I can properly test and fix this... eventually.

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

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

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

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

Also, 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.

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

Interesting post that could help in some instances: https://www.drupal.org/node/2402147

FWIW, 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 :-/

There 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).

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

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