jumpy progress bar during upload

  • susancbk
  • Proficient
  • Proficient
  • susancbk
  • Posts: 293
  • Loc: New York City

Post 3+ Months Ago

Here's a screencast of my uploader in progress -
http://www.screencast.com/users/susanBuck/folders/Jing/media/d3274745-d5a6-4e67-a4f2-fffe7726e8ab

You'll notice that the progress bar jumps all over the place during upload.
Is it trying to show the progress for each individual files rather than all the files at a whole?

I'm not thinking its the latter, because you'll notice its set to put a green check next to a file when a file is done. However the jumpyness of the progress bar and when the checks appear aren't syncing.

Code: [ Select ]
import flash.net.FileReferenceList;
import flash.net.FileReference;

var listener:Object = new Object();


fileList._x = browseButton._x + 20;
fileList._y = browseButton._y + 30;

progress._visible = false;
uploadButton._alpha = 25;

_global.yCounter = browseButton._y;

// dont let uploadButton work at start...only enable once browse has been called
uploadButton.enabled = false;

// holds the list of files
_global.files = new Array();



listener.onSelect = function(fileRefList:FileReferenceList) {
    
    uploadButton.enabled = true;
    uploadButton._alpha = 100;
    
    // clear all the old checks if we had just done an upload
    for(i=0; i < _global.howManyChecksToClear; i++) {
        removeMovieClip("done_"+i);
    }
    
    // fileRefList.fileList == what was just selected in the browse window
    // concatenate that to our existing list of files
    // because array files should hold all the files
    var list:Array = fileRefList.fileList;
    _global.files = _global.files.concat(list);
    
    // a file reference holds information about a file from the fileList (ex name, size?)
    
    
    
    // clear the file list text box so we can reprint everything
    fileList.text = "";
    
    // go through the files
    for (i = 0; i<_global.files.length; i++) {
        
        var item:FileReference;

        // put file in item
        item = _global.files[i];
        
        // have to call this AFITER item has file - otherwise the first one will be undefined
        trace(item.addListener(this));
        
        // print the name of that file
        fileList.text += item.name+"\n"; // print files on screen
        
        // create a new delete button
        var newDeleteButton = _root.attachMovie("deleteButton", "box_"+i, i);
        newDeleteButton.id = i;
        newDeleteButton._y =fileList._y + (i*17); // this started at the y pos of the browse button (to line things up)
        newDeleteButton._x = fileList._x - 13; // static
        
        // DELETE FILE
        // 1. clear the file display list
        // 2. remove item from array
        // 3. reprint list of files
        // 4. get rid of its "x" delete button
        newDeleteButton.onRelease = function() {
            // clear our display list of files
            fileList.text = "";

            // take out this file from our array of files
            _global.files.splice(this.id,1);
            
            // reprint our list of files
            for (var i = 0; i<_global.files.length; i++) {
                item = _global.files[i];
                fileList.text += item.name+"\n";
                
            }
            // get rid of the x
            removeMovieClip("box_"+i);
            
            
            
        };
        
        
        
            
    }
};

//listener.onProgress = function(file:FileReference, bytesLoaded:Number, bytesTotal:Number):Void {
//  trace("onProgress with bytesLoaded: " + bytesLoaded + " bytesTotal: " + bytesTotal);
//}



listener.onProgress = function(file:FileReference, bytesLoaded:Number, bytesTotal:Number):Void {
    // only show the progress bar if files are big enough to reach onProgress function
    progress._visible = true;
    progress.mode = "manual";
    progress.setProgress(bytesLoaded, bytesTotal);
    trace("bytesLoaded: " + bytesLoaded + " bytesTotal: " + bytesTotal);
    
    
    if(bytesLoaded < (bytesTotal*.25) && bytesLoaded > (bytesTotal*.10)) {
        uploadStatus.text = "Pretty snazzy image you're uploading there.";
        
    }
    
    if(bytesLoaded < (bytesTotal*.50) && bytesLoaded >= (bytesTotal*.25)) {
        uploadStatus.text = "This will totally be worth the wait.";
        
    }
    
    
    if(bytesLoaded < (bytesTotal*.75) && bytesLoaded >= (bytesTotal*.50)) {
        uploadStatus.text = "Almost there...!";
        
    }
    
    
    
    if(bytesLoaded == bytesTotal) {
        uploadStatus.text = "Just about done! Give us a couple more seconds to wrap things up";
        progress.setProgress(99, 100);
    }
    
}


listener.onComplete = function(file:FileReference):Void {
    
    
    /// check marks
    
    i = _global.fileCount;
    _global.fileCount ++;
    var newDoneIcon = _root.attachMovie("doneIcon", "done_"+i, i);
    newDoneIcon.id = i;
    newDoneIcon._y = fileList._y + (i*17); // this started at the y pos of the browse button (to line things up)
    newDoneIcon._x = fileList._x - 13; // static
    
    trace("onComplete: "+file.name);    
    
    
    // WHEN ALL FILES ARE DONE
    if(i == (_global.files.length - 1)) {
        trace("ALL FILES HAVE BEEN UPLOADED");
        
        var sendVars:LoadVars = new LoadVars();
        for (var i:Number = 0; i<_global.files.length; i++) {
            var item:FileReference;
            item = _global.files[i];
            
            // weird workaround for first file being undefined...
            // have to use == instead of += for first one
            if(i==0) {
                sendVars.files = item.name + ":";
            }
            else {
                sendVars.files += item.name;
                sendVars.files += ":";
            }
            
            
        }
        
        sendVars.howManyFiles = _global.files.length;
        
        
        sendVars.send("http://photojojo.com/imageEditor/vinyls/showAll.php", "_self", "POST");
        
    
    
        // now clear the list since we're all done uploading.
        _global.files.splice(0);
    }
    
    
};







listener.onHTTPError = function(file:FileReference, httpError:Number):Void {
  trace("HTTP Error :" + httpError);
  // Write code here to do corrective actions
}


listener.onIOError = function(file:FileReference):Void {
  trace("An IO Error occured");
}

listener.onSecurityError = function(file:FileReference, errorString:String):Void {
  trace("SecurityError: " + file.name + " ErrorString: " + errorString);
}





var fileRef:FileReferenceList = new FileReferenceList();
fileRef.addListener(listener);

browseButton.onRelease = function() {
    upload.enabled = true;
    fileRef.browse([{description:"Image files", extension:"*.jpg;*.gif;*.png"}]);
};

uploadButton.onRelease = function() {
    
    // go through the array of files uploading each one
    this.enabled = false;
    
    
    
    // clear fileCount - used in onComplete for putting checks
    _global.fileCount = 0;
    
    for (var i:Number = 0; i<_global.files.length; i++) {
        item = _global.files[i];
        trace("uploadButtonRelease: " + item.name);
        item.upload("upload.php");
        
        // get rid of delete x icons
        removeMovieClip("box_"+i);
        
        
        
    }
    
    // before we clear the file list, get how long it is - this is how many checks we'll have to delete next time they click "browse"
    _global.howManyChecksToClear = _global.files.length;
    
    
    // before we delete file list, make a copy of it for other functions
    
    
    // moved this to onProgress
    // now clear the list since we're all done uploading.
    //_global.files.splice(0);
    
    
};
  1. import flash.net.FileReferenceList;
  2. import flash.net.FileReference;
  3. var listener:Object = new Object();
  4. fileList._x = browseButton._x + 20;
  5. fileList._y = browseButton._y + 30;
  6. progress._visible = false;
  7. uploadButton._alpha = 25;
  8. _global.yCounter = browseButton._y;
  9. // dont let uploadButton work at start...only enable once browse has been called
  10. uploadButton.enabled = false;
  11. // holds the list of files
  12. _global.files = new Array();
  13. listener.onSelect = function(fileRefList:FileReferenceList) {
  14.     
  15.     uploadButton.enabled = true;
  16.     uploadButton._alpha = 100;
  17.     
  18.     // clear all the old checks if we had just done an upload
  19.     for(i=0; i < _global.howManyChecksToClear; i++) {
  20.         removeMovieClip("done_"+i);
  21.     }
  22.     
  23.     // fileRefList.fileList == what was just selected in the browse window
  24.     // concatenate that to our existing list of files
  25.     // because array files should hold all the files
  26.     var list:Array = fileRefList.fileList;
  27.     _global.files = _global.files.concat(list);
  28.     
  29.     // a file reference holds information about a file from the fileList (ex name, size?)
  30.     
  31.     
  32.     
  33.     // clear the file list text box so we can reprint everything
  34.     fileList.text = "";
  35.     
  36.     // go through the files
  37.     for (i = 0; i<_global.files.length; i++) {
  38.         
  39.         var item:FileReference;
  40.         // put file in item
  41.         item = _global.files[i];
  42.         
  43.         // have to call this AFITER item has file - otherwise the first one will be undefined
  44.         trace(item.addListener(this));
  45.         
  46.         // print the name of that file
  47.         fileList.text += item.name+"\n"; // print files on screen
  48.         
  49.         // create a new delete button
  50.         var newDeleteButton = _root.attachMovie("deleteButton", "box_"+i, i);
  51.         newDeleteButton.id = i;
  52.         newDeleteButton._y =fileList._y + (i*17); // this started at the y pos of the browse button (to line things up)
  53.         newDeleteButton._x = fileList._x - 13; // static
  54.         
  55.         // DELETE FILE
  56.         // 1. clear the file display list
  57.         // 2. remove item from array
  58.         // 3. reprint list of files
  59.         // 4. get rid of its "x" delete button
  60.         newDeleteButton.onRelease = function() {
  61.             // clear our display list of files
  62.             fileList.text = "";
  63.             // take out this file from our array of files
  64.             _global.files.splice(this.id,1);
  65.             
  66.             // reprint our list of files
  67.             for (var i = 0; i<_global.files.length; i++) {
  68.                 item = _global.files[i];
  69.                 fileList.text += item.name+"\n";
  70.                 
  71.             }
  72.             // get rid of the x
  73.             removeMovieClip("box_"+i);
  74.             
  75.             
  76.             
  77.         };
  78.         
  79.         
  80.         
  81.             
  82.     }
  83. };
  84. //listener.onProgress = function(file:FileReference, bytesLoaded:Number, bytesTotal:Number):Void {
  85. //  trace("onProgress with bytesLoaded: " + bytesLoaded + " bytesTotal: " + bytesTotal);
  86. //}
  87. listener.onProgress = function(file:FileReference, bytesLoaded:Number, bytesTotal:Number):Void {
  88.     // only show the progress bar if files are big enough to reach onProgress function
  89.     progress._visible = true;
  90.     progress.mode = "manual";
  91.     progress.setProgress(bytesLoaded, bytesTotal);
  92.     trace("bytesLoaded: " + bytesLoaded + " bytesTotal: " + bytesTotal);
  93.     
  94.     
  95.     if(bytesLoaded < (bytesTotal*.25) && bytesLoaded > (bytesTotal*.10)) {
  96.         uploadStatus.text = "Pretty snazzy image you're uploading there.";
  97.         
  98.     }
  99.     
  100.     if(bytesLoaded < (bytesTotal*.50) && bytesLoaded >= (bytesTotal*.25)) {
  101.         uploadStatus.text = "This will totally be worth the wait.";
  102.         
  103.     }
  104.     
  105.     
  106.     if(bytesLoaded < (bytesTotal*.75) && bytesLoaded >= (bytesTotal*.50)) {
  107.         uploadStatus.text = "Almost there...!";
  108.         
  109.     }
  110.     
  111.     
  112.     
  113.     if(bytesLoaded == bytesTotal) {
  114.         uploadStatus.text = "Just about done! Give us a couple more seconds to wrap things up";
  115.         progress.setProgress(99, 100);
  116.     }
  117.     
  118. }
  119. listener.onComplete = function(file:FileReference):Void {
  120.     
  121.     
  122.     /// check marks
  123.     
  124.     i = _global.fileCount;
  125.     _global.fileCount ++;
  126.     var newDoneIcon = _root.attachMovie("doneIcon", "done_"+i, i);
  127.     newDoneIcon.id = i;
  128.     newDoneIcon._y = fileList._y + (i*17); // this started at the y pos of the browse button (to line things up)
  129.     newDoneIcon._x = fileList._x - 13; // static
  130.     
  131.     trace("onComplete: "+file.name);    
  132.     
  133.     
  134.     // WHEN ALL FILES ARE DONE
  135.     if(i == (_global.files.length - 1)) {
  136.         trace("ALL FILES HAVE BEEN UPLOADED");
  137.         
  138.         var sendVars:LoadVars = new LoadVars();
  139.         for (var i:Number = 0; i<_global.files.length; i++) {
  140.             var item:FileReference;
  141.             item = _global.files[i];
  142.             
  143.             // weird workaround for first file being undefined...
  144.             // have to use == instead of += for first one
  145.             if(i==0) {
  146.                 sendVars.files = item.name + ":";
  147.             }
  148.             else {
  149.                 sendVars.files += item.name;
  150.                 sendVars.files += ":";
  151.             }
  152.             
  153.             
  154.         }
  155.         
  156.         sendVars.howManyFiles = _global.files.length;
  157.         
  158.         
  159.         sendVars.send("http://photojojo.com/imageEditor/vinyls/showAll.php", "_self", "POST");
  160.         
  161.     
  162.     
  163.         // now clear the list since we're all done uploading.
  164.         _global.files.splice(0);
  165.     }
  166.     
  167.     
  168. };
  169. listener.onHTTPError = function(file:FileReference, httpError:Number):Void {
  170.   trace("HTTP Error :" + httpError);
  171.   // Write code here to do corrective actions
  172. }
  173. listener.onIOError = function(file:FileReference):Void {
  174.   trace("An IO Error occured");
  175. }
  176. listener.onSecurityError = function(file:FileReference, errorString:String):Void {
  177.   trace("SecurityError: " + file.name + " ErrorString: " + errorString);
  178. }
  179. var fileRef:FileReferenceList = new FileReferenceList();
  180. fileRef.addListener(listener);
  181. browseButton.onRelease = function() {
  182.     upload.enabled = true;
  183.     fileRef.browse([{description:"Image files", extension:"*.jpg;*.gif;*.png"}]);
  184. };
  185. uploadButton.onRelease = function() {
  186.     
  187.     // go through the array of files uploading each one
  188.     this.enabled = false;
  189.     
  190.     
  191.     
  192.     // clear fileCount - used in onComplete for putting checks
  193.     _global.fileCount = 0;
  194.     
  195.     for (var i:Number = 0; i<_global.files.length; i++) {
  196.         item = _global.files[i];
  197.         trace("uploadButtonRelease: " + item.name);
  198.         item.upload("upload.php");
  199.         
  200.         // get rid of delete x icons
  201.         removeMovieClip("box_"+i);
  202.         
  203.         
  204.         
  205.     }
  206.     
  207.     // before we clear the file list, get how long it is - this is how many checks we'll have to delete next time they click "browse"
  208.     _global.howManyChecksToClear = _global.files.length;
  209.     
  210.     
  211.     // before we delete file list, make a copy of it for other functions
  212.     
  213.     
  214.     // moved this to onProgress
  215.     // now clear the list since we're all done uploading.
  216.     //_global.files.splice(0);
  217.     
  218.     
  219. };
  • joebert
  • Fart Bubbles
  • Genius
  • User avatar
  • Posts: 13504
  • Loc: Florida

Post 3+ Months Ago

Put an object between your progress object & your on[Progress/Select/Complete] event handlers.

onSelect you will tell the object to add the additional filesize of the selected file to a total.

Before deleting you will tell the object to subtract the soon to be deleted files filesize from the total.

Have the onProgress handler work out how many bytes where loaded since the last firing of onProgress for that file & send that to the new object.

Whenever the new object recieves updates from onProgress handlers it will work out a total progress what each files onProgress handler has told it & call the existing progress objects' setProgress method to update the total progress.


Otherwise, attach new instances of the progress object for each file & have their handlers refer to those seprate objects.

Post Information

  • Total Posts in this topic: 2 posts
  • Users browsing this forum: No registered users and 17 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.