phUploader progress bar?

[KidCactus]

Is it possible to implement a progress bar for the upload in some easy way?

[djkfunk]

I'm very interested in this as well. I'm trying to piece one together and will post it if I'm successful.

[djkfunk]

Okay, it took a lot of time/trial/error but I found a solution for the progress bar. This is BY FAR the easiest one to implement (I tried many others). It's a combination of Javascript and AJAX, there's very little code, and the best part is it doesn't add any additional pages - which I love because I'm a minimalist.

1. Go to http://www.ajaxload.info/ and generate an image for your progress bar. This site has great choices and allows customization if you want to match your site's colors.

2. Insert this code just before the end of the </head> tag in phUploader.php. If the </head> tag is missing like it was in mine, you can insert it around line 273.

<script language="javascript" type="text/javascript">
	function loadSubmit() {
	var ProgressImage = document.getElementById('progress_image');
	document.getElementById("progress").style.visibility = "visible";
	setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
	return true;
	}
</script>

3. Insert this code wherever you want the progress bar to show. I put mine below the submit and reset buttons, around line 420 (haha - seriously). (NOTE - If you remove the <p> tag, the progress bar might not stay hidden until you submit, like it's supposed to). Also, you'll notice a reference to the images folder here, so you'll either need to create the directory "images" or change the code to match wherever you put the image.

[HTML]
<p style="visibility:hidden;" id="progress"/><img id="progress_image" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""> Uploading in progress

[djkfunk]

hmm...part of that got cut off. Here's the code for #3:

[HTML]<p style="visibility:hidden;" id="progress"><img id="progress_image" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""> Uploading in progress

[djkfunk]

uhh...i don't know what's happening...it keeps cutting me off...PM me if you need the progress bar.

[alja1]

My friend, you said that the code kept getting cut off. Can you email me the complete code for the progress bar? I can't PM because I don't have 5 posts. Thanks so much in advance.

[djkfunk]

Sure, this is the code:

<span style="visibility:hidden;" id="progress" align="center" /><img id="progress_image" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""><br />
            <font color="#FFFFFF" size="-1">Upload in progress...</font>

You can change the "IMG ID" if you want, and you may need to change the "SRC" based on where your image is located and what it's called.

Good luck!

[blade x]

I ad the below code but it fails to show and im also using the same file and image location as you

PHP Code:

<script language="javascript" type="text/javascript">
    function loadSubmit() {
    var ProgressImage = document.getElementById('progress_image');
    document.getElementById("progress").style.visibility = "visible";
    setTimeout(function(){ProgressImage.src = ProgressImage.src},100);
    return true;
    }
</script>
<p><span style="visibility:hidden;" id="progress" align="center" /><img id="progress_image" style="padding-left:5px;padding-top:5px;" src="images/ajax-loader.gif" alt=""><br />
            <font color="#FFFFFF" size="-1">Upload in progress...</font></p>