# Jumpy progress bar during upload

**URL:** <https://forum.kirupa.com/t/jumpy-progress-bar-during-upload/241751>\
**Category:** Uncategorized\
**Created:** [October 17, 2007, 6:38pm UTC](https://forum.kirupa.com/t/jumpy-progress-bar-during-upload/241751 "2007-10-17T18:38:39Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![susancbk](https://avatars.discourse-cdn.com/v4/letter/s/ebca7d/32.png) [@susancbk](https://forum.kirupa.com/u/susancbk)\
**Post date:** [October 17, 2007, 6:38pm UTC](https://forum.kirupa.com/t/jumpy-progress-bar-during-upload/241751/1 "2007-10-17T18:38:39Z")

</div>

Here’s a screencast of my uploader in progress -

> **[jumpyUploader](http://www.screencast.com/users/susanBuck/folders/Jing/media/d3274745-d5a6-4e67-a4f2-fffe7726e8ab)**
>
> Shared from Screencast.com

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.

```auto

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*;
		
		// 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+"
"; // 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*;
				fileList.text += item.name+"
";
				
			}
			// 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*;
			
			// 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*;
		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);
	
	
};

```