Problem: When I start up any Browser, it opens up with its default web page, I open a session to my Test File Upload with Progress bar Web Application in that Tab, or that same Web App. in a new Tab. When I start the first file upload, it shows the Progress bar to go straight to 100% even though the file is still uploading. If I then do the file upload again, it works as expected, the progress bar shows the file being loaded, eg 20%, 43%, 80%, 98% then Done. I am using the example that is published at:- https://www.sitepoint.com/tracking-upload-progress-with-php-and-javascript/
I have modified it slightly in an effort to find out what is going on.
This problem occurs on my Web Site which is on the Internet and on my Local Server. Both systems are LINUX, using Apache2. The Web Site on the Internet is using PHP 5.6.30. My local server is using PHP 7.1.5.
This same problem can be reproduced when using a Cellphone running Safari, Chrome, or FireFox. So this looks like a Server based issue or some coding issue I have either at the Client or Server end.
I use this type of code to upload Video files and my work around is to assume that the file will not be fully uploaded until at least after the first progress percent loaded calculation. If I get the '100' reply on the first pass I assume that the progress bar reading is wrong and suggest the the file upload should be tried again. The second upload always works. In my case the maximum size allowed for the video file 28MB.
Can anybody assist with this problem?
Below is a copy of my two PHP Web Pages.
File: progress.php
<?php
session_start();
$key = ini_get("session.upload_progress.prefix") . "form_60";
if (!empty($_SESSION[$key]))
{
$current = $_SESSION[$key]["bytes_processed"];
$total = $_SESSION[$key]["content_length"];
echo $current < $total ? ceil($current / $total * 100) : 100;
} else
{
echo "100";
}
?>
File: upload2.php
<?php
if ($_SERVER["REQUEST_METHOD"] == "POST" && !empty($_FILES["userfile"])) {
// move_uploaded_file()
$folder = "tmp/";
//upload the file
move_uploaded_file($_FILES["userfile"["tmp_name"], "$folder" . $_FILES["userfile"]["name"]);
}
?>
<html>
<head>
<title>File Upload Progress Bar</title>
<style>
#bar_blank {
border: solid 1px #000;
height: 20px;
width: 300px;
}
#bar_color {
background-color: #006666;
height: 20px;
width: 0px;
}
#bar_blank, #hidden_iframe {
display: none;
}
</style>
</head>
<body>
<div id="bar_blank">
<div id="bar_color"></div>
</div>
<div id="Message"></div>
<form action="" method="POST"
id="form_60" enctype="multipart/form-data" target="hidden_iframe">
<input type="hidden" value="form_60"
name="<?php echo ini_get("session.upload_progress.name"); ?>">
<input type="file" name="userfile"><br>
<input type="submit" value="Start Upload">
</form>
<iframe id="hidden_iframe" name="hidden_iframe" src="about:blank"></iframe>
<!script type="text/javascript" src="upload2.js"></script>
<script type="text/javascript">
var FirstTime = 'Y';
function toggleBarVisibility() {
var e = document.getElementById("bar_blank");
e.style.display = (e.style.display == "block") ? "none" : "block";
}
function createRequestObject() {
var http;
if (navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}
return http;
}
function sendRequest() {
var http = createRequestObject();
http.open("GET", "progress.php", false); // was GET
http.onreadystatechange = function () { handleResponse(http); };
http.send(null);
}
function handleResponse(http) {
var response;
if (http.readyState == 4) {
response = http.responseText;
document.getElementById("bar_color").style.width = response + "%";
document.getElementById("Message").innerHTML = response + "%";
alert(response);
if (response < 100) {
FirstTime = 'N'
setTimeout("sendRequest()", 1000);
}
else {
alert(response);
toggleBarVisibility();
if (FirstTime == 'N')
{
document.getElementById("Message").innerHTML = "Done.";
}
if (FirstTime == 'Y')
{
document.getElementById("Message").innerHTML = "Error.";
alert('System error, please try again.')
}
}
}
}
function startUpload() {
toggleBarVisibility();
setTimeout("sendRequest()", 1000);
}
(function () {
document.getElementById("form_60").onsubmit = startUpload;
})();
</script>
</body>
</html>
I have now found a workaround, which is listed below. It involves doing a Dummy request from a startup page in my application. In my case I use the Login Web Page to put the Dummy code.
<script type="text/javascript">
function createRequestObject() {
var http;
if (navigator.appName == "Microsoft Internet Explorer") {
http = new ActiveXObject("Microsoft.XMLHTTP");
}
else {
http = new XMLHttpRequest();
}
return http;
}
function sendRequest() {
var http = createRequestObject();
http.open("GET", "progress.php", false); // was GET
http.onreadystatechange = function () { handleResponse(http); };
http.send(null);
}
function handleResponse(http)
{
var response;
if (http.readyState == 4)
{
response = http.responseText;
if (response < 100)
{
setTimeout("sendRequest()", 1000);
}
}
}
function startUpload() {
setTimeout("sendRequest()", 1000);
}
window.onload = function() {
startUpload();
}
</script>
Now that I have learnt a bit more about Session Variables it seems that to follow the rules I should have put:-
session_start();
at the start of the upload2.php web page, as this is where the variable information is coming from in the first instance. This then works fine.