HTTP PUT Request - Progress Bar Implementation

Question

I have discovered that HTTP PUT Request ist the most suitable for very large files upload (1GB or more).

The solution works well and I can upload any file of my choice to the server. However, I have difficulties monitoring upload progress.

I have implemented onprogress callback, but this one gets called only once after the file is uploaded via PUT.

My JavaScript Code:

var req = createRequest();
req.open("PUT", "PHP/upload_file.php?folder=" + aUploadedFile.upload_folder + "&master_folder=" + settings.strServerSideMasterFolder + "&file_name=" + aUploadedFile.file_name);
req.setRequestHeader("Content-type", "text/plain");
req.onload = function (event)
{
    console.log("OnLoad Called: " + aUploadedFile.file_name);
}
req.onprogress = function (event)
{
    console.log("OnProgress Called: " + aUploadedFile.file_name);
}
req.send(aUploadedFile.file_object);

• What are my options when i wish to monitor the upload progress via PUT, please?
• Should I establish another JavaScript AJAX call, that will monitor the size of the uploaded file o the server?
• Is there any other working solution available?

I use:

• HTML5
• JavaScript
• PHP
• Apache

I do not use:

• jQuery

Thank you in advance.

Answer 1

Have you tried xhr.upload.onprogress instead of xhr.onprogress?

If that doesn't work too, you could establish another JavaScript AJAX call, like you said. Recently, I've made an upload system that read the file line per line, and it needed to show some extra information about the upload, and not just the percentage, so I did something like this:

• The main page makes an AJAX request to a file responsible to process the file
• In that file, I had to close the connection, so the AJAX request could complete, but the PHP script would still be running, using this:

ob_start();
$file = tempnam('/tmp', uniqid()); // create a temp file to show status of the action
echo json_encode(array('file' => $file));
header('Content-length: '.ob_get_length());
header('Connection: close');
ob_end_flush();
flush(); // The AJAX request is completed here, but the script is still running...

function writeToFile($handle, $arr) {
    ftruncate($handle, 0); // empty file
    fwrite($handle, json_encode($arr));
}
$handle = fopen($file, 'w');
while (readLine($uploadedFile)) {
    // code to process line
    writeToFile($handle, array('progress' => $current / $total, 'action' => 'Reading...'));
}
// insert into database
writeToFile($handle, array('progress' => '100', 'action' => 'Inserting into database...'));
fclose($handle);

• At the main page, the AJAX request would return the name of the file that contains the information, so I would create several GET requests to that file, using setInterval method

Note: in my case, I created another PHP file to show the contents of the progress file (with file_get_contents), so I could manually delete that file when the operation completes