Add another item breaks progress bar.

I just want to add a data point, and if anyone has a clue where point me to start picking at this then I'll help all that I'm able.

I noticed that when I populate say 4-5 fields and then go down them all and click Upload then I get progress bars for each only when the fields already existed (say if I edit a form and Removed them). But if my files are ~500MB then I only get a progress bar for the last [and pre-existing] fields whenever I use Add another item. Or, if I click each Upload but wait a couple of seconds between each, until the progress bar starts, then all if fine.

This is just a guess, but here goes... It seems like some client JavaScript/jQuery function wants to look at the file (get its size?) and then contact the PHP process on the server and pass that info before it proceeds to the next file. But if the file is too big and this function can't complete in time the before the user clicks on the next file then the designed series of events is disrupted.

Does that sound reasonable? How might I force a wait until the suspect function completes?

>>> EDIT: I believe there's some sort of index that's supposed to identify each field to the apache progress bar module thingie, but it's failing.<<<

Is there a simple way to disable the input field while a file is uploading? When I use $(this).attr('disabled','disabled'); in my waitSave behavior below then the upload stops and resets the field.

>>> EDIT: I added .click(function() { return false;}) and this does the trick. <<<

I ask because, again, I'm uploading huge files and after clicking Upload and the file starts (progress bar, etc) I can still click Browse and change the file, etc.

It seems that filefield, as awesome as it is, isn't intended for very large files (I allow files up to 10 Gig in size). ie, so long as files are small and the server/client response is snappy, nobody would care. But when files are very very large then the missing user feedback quickly becomes apparent. The trouble modes I see are mostly long periods of time when files are uploading (or being moved on the server from temp file to final location) but there's no indication of activity apparent to the user, so the user can/will in frustration click on various things (back, cancel, or reload the page).

For example:

1. "Save" node causes all of the files to upload (e.g. user didn't diligently click Upload on each field), but no progress bars are shown because those rely on clicking the individual "Upload" buttons.
2. Non-working progress bars on fields when "add another is used". (whenever "Add another" is used only the LAST-added field's progress bar works; progress bar appears, but sticks at "Starting..." -- written up here: #491228: Progress bar does not make progress)
3. Can click Browse when an upload is in progress.

I've been told that some of these troubles come from the parent CCK module and can't easily be fixed via Filefield, but I'm hoping that folks who are intimate with the code can help me identify 1) which of these issues are specific to each (filefield vs CCK), and 2) how I might better attack these in the short or long term, better than the method I've taken below.

So anyway, as a workaround and to not hack Filefield, I've imposed the following JS via the theme engine and my theme's script.js file. This code does the following (it's ugly, but I had to do something!):

1. Disables the Add another and Save buttons whenever there's a populated file upload field that hasn't yet been uploaded.
2. Provides a "clear" button if a file was browsed to that the user decides not to upload. Consider that there's no way to clear a field, so if the user has 10 other files already uploaded they may not want to hit Cancel to prevent other uploads they've already browsed to (I argue that this should be done by not uploading files via Save, and requiring the user to click the Upload button explicitly for each field). Note that IE will not allow JavaScript to edit nor clear the input value for type="file", so this is disabled for IE (sigh).

Theme script.js file:

//toggle Save+Add OFF
Drupal.behaviors.waitSave = function (context) {
  $('.form-file', context).each(function () {
    $(this).change(function() {
      if ($.browser.msie) {
      	this.blur();
      }
      if($(this).val() !== '') {
        var currentId = $(this).attr('id');
        var currentClear = currentId+"-clear";
        var currentWrap = currentId+"-wrap";
        var upload = $(this).next().attr('id');
        $(this).next(".form-submit").mousedown(function() {
          //$('#'+currentId).attr('disabled','disabled').fadeTo(200,.20); // This not working -- causes upload to fail
          $('#'+currentId).fadeTo(200,.20).click(function() { return false;});  // <-- Works! :)
        });
        if ($('#'+currentWrap).length == 0) {
          $(this).wrap('<span id="'+currentWrap+'"></span>');
        }
        if ($('#'+currentClear).length == 0) {
          if (! $.browser.msie) {
          $(this).after('<input id="'+currentClear+'" type="button" class="form-submit cancel-upload" title="Clear field" alt="Clear field" onclick="reset_html(\''+currentId+'\',\''+currentWrap+'\')" />');
          }
        }
        $('#edit-field-datafiles-field-datafiles-add-more').attr('disabled','disabled').fadeTo(200,.20);
        $('#edit-submit').attr('disabled','disabled').fadeTo(200,.20);
      } else {
        reset_save();
      }
    });
  });
}

//toggle Save+Add ON
Drupal.behaviors.readySave = function (context) {
   var queued = 0;
   $('#field-datafiles-items').find('.form-file').each(function(){
      if ( jQuery(this).val() !='' ) {
         queued++;
      }
   });
   if (queued === 0) {
      $('#edit-field-datafiles-field-datafiles-add-more').removeAttr('disabled').fadeTo(200,1);
      $('#edit-submit').removeAttr('disabled').fadeTo(200,1);
   }
}

function reset_save() {
   var queued = 0;
   $('#field-datafiles-items').find('.form-file').each(function(){
      if ( jQuery(this).val() !='' ) {
         queued++;
      }
   });
   if (queued === 0) {
      $('#edit-field-datafiles-field-datafiles-add-more').removeAttr('disabled').fadeTo(200,1);
      $('#edit-submit').removeAttr('disabled').fadeTo(200,1);
   }
}


function reset_html(id,idw) {
    var currentWrap = id+"-wrap";
    //$('#'+currentWrap).html($('#'+currentWrap).html());
    if ($.browser.msie) {
      $('#'+idw).html($('#'+idw).html());
    } else {
      $('#'+id).val('');
    }
   var queued = 0;
   $('#field-datafiles-items').find('.form-file').each(function(){
      if ($(this).val() !='' ) {
         queued++;
      }
   });
   if (queued == 0) {
      $('#edit-field-datafiles-field-datafiles-add-more').removeAttr('disabled').fadeTo(200,1);
      $('#edit-submit').removeAttr('disabled').fadeTo(200,1);
   }
   return;
}

This thread has had no comments by the maintainers, so I wanted to ask what you feel the status should be, such as 'not worth fixing' or 'impossible because bug is in CCK rather than FF', etc.

I realize that this module may have been written when someone needed to upload small files, but the progress bar is essential when working with huge files and so having compatibility with CCK's add-another-item feature would be super groovy.

I included some observations in #491228: Progress bar does not make progress (here)

Also, I'm eager to help fix/test/etc if somebody can steer me in the right direction. For example, how does FF correlate each fields so ajax calls can talk to PECL and track each upload? (e.g. where are the IDs stored? a JavaScript var? session var?). Perhaps I can figure out why the new field breaks the just-previously added fields.