jumpy progress bar during upload
- susancbk
- Proficient


- Joined: Nov 13, 2004
- Posts: 293
- Loc: New York City
- Status: Offline
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.
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);
};
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);
};
- 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);
- };
- Anonymous
- Bot


- Joined: 25 Feb 2008
- Posts: ?
- Loc: Ozzuland
- Status: Online
October 17th, 2007, 11:37 am
- joebert
- Sledgehammer


- Joined: Feb 10, 2004
- Posts: 13455
- Loc: Florida
- Status: Offline
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.
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.
Strong with this one, the sudo is.
Page 1 of 1
To Reply to this topic you need to LOGIN or REGISTER. It is free.
Post Information
- Total Posts in this topic: 2 posts
- Users browsing this forum: No registered users and 58 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
