Uploadify - Single progress bar for multiple uploads

Is it pos开发者_开发技巧sible to have a single upload progress bar with multiple file uploads using uploadify?

Working solution for Rails 3.1 application.

It is a single progress bar for multiple uploads, but... I used jQuery.animate() so... it isn't perfectly fluent progress bar. It 'jumps'.

1. Uploadify init

          $('#album_piece_images').uploadify({
            'uploader' : '/assets/uploadify.swf',
            'script' : url,
            'fileDataName' : 'piece[image]',
            'fileExt' : '*.png;*.jpeg;*.jpg;*.gif',
            'cancelImg' : '/assets/cancel.png',
            'multi' : true,
            'scriptData' : upload_params,
            'auto' : true,
            'onOpen': function(event, ID, fileObj) {
              $(".bar_container.rounded_bar_container_tiny.container_tiny").removeClass("hide");
            },  
            'onSelect': function(event, ID, fileObj) {
              totalSize += fileObj.size;
            },  
            'onComplete'  : function(event, ID, fileObj, response, data) {
              bytesUpload += fileObj.size;
              $("#uploaded_images").append('<input type="hidden" value="' + response + '" name="album[piece_ids][]">');
            },  
            'onProgress': function(event, ID, fileObj, data) {
              var progress = (((data.bytesLoaded + bytesUpload) / totalSize) * 100) + "%";
              $(".progress").animate({
                'width': progress
              }, 250);
            },  
            'onAllComplete' : function(event,data) {
              $("#new_album").submit();
            }   
          }); 

2. Download this css for progress bar and put them in your stylesheet directory

https://github.com/jsullivan/CSS3-Progress-bars

https://raw.github.com/jsullivan/CSS3-Progress-bars/master/css3-progress-bar.css

3. View (HAML!) for form on which we attach Uploadify

  = form_for @album, url: albums_path, method: :post, html: { class: "alt normal-upload", data: { :"session-cookie-key" => Rails.application.config.session_options[:key], :"session-cookie-value" => cookies[Rails.application.config.session_options[:key]], :"url" => pieces_path } } do |f|
    %fieldset
      .row
        .field
          = f.label :album_id, "Name of album"
          = f.text_field :name

      #uploaded_images

      .bar_container.rounded_bar_container_tiny.container_tiny.hide
        .bar_mortice.rounded_tiny.mortice_tiny
          .progress.rounded_tiny.progress_tiny

      .submit
        = f.file_field :piece_images, multiple: true

4. CSS for hide class

.hide {
  position: absolute;
  top: -999em;
  left: -999em;
  margin: 0;
  padding: 0;
}

5. CSS - Disable uploadify progress bar

.uploadifyQueue {
  display:none;
}

6. Delete uploadify.css

You can get the total bytes and divide by the bytes uploaded.

    var totalSize = 0;
var bytesUpload=0;

$('#file_upload').uploadify({
      'uploader'    : '/uploadify/uploadify.swf',
      'script'      : '/uploadify/uploadify.php',
      'cancelImg'   : '/uploadify/cancel.png',
      'folder'      : '/uploads',
      'removeCompleted' : false,
      'onselect'    : function(event,ID,fileObj) {
        totalSize = fileObj.size;
        },
        'onComplete'  : function(event, ID, fileObj, response, data) {
            bytesUpload += fileObj.size;
        },
      'onProgress'  : function(event,ID,fileObj,data) {
          var progress = (data.bytesLoaded+bytesUpload)/totalSize;
          //Set progress bar to progress...
        }
});