WebEngine
WebEngine copied to clipboard
Show upload progress in response header
It would be nice to expose this automatically, so a large upload's progress can be checked using a fetch HEAD request.
In an HTML form, have a hidden input like this:
<form ...>
<input type="hidden" name="PHP_SESSION_UPLOAD_PROGRESS" value="my-upload-thing" />
<input type="file" name="photos[]" multiple />
<button>Upload photos</button>
</form>
This will automatically set the session value $_SESSION["upload_progress_my-upload-thing"] with an array that looks like this:
array(
"start_time" => 1234567890, // The request time
"content_length" => 57343257, // POST content length
"bytes_processed" => 453489, // Amount of bytes received and processed
"done" => false, // true when the POST handler has finished, successfully or not
"files" => array(
0 => array(
"field_name" => "photos[]", // Name of the <input/> field
// The following 3 elements equals those in $_FILES
"name" => "foo.jpg",
"tmp_name" => "/tmp/phpxxxxxx",
"error" => 0,
"done" => true, // True when the POST handler has finished handling this file
"start_time" => 1234567890, // When this file has started to be processed
"bytes_processed" => 57343250, // Number of bytes received and processed for this file
),
// An other file, not finished uploading, in the same request
1 => array(
"field_name" => "photos[]",
"name" => "bar.jpg",
"tmp_name" => NULL,
"error" => 0,
"done" => false,
"start_time" => 1234567899,
"bytes_processed" => 54554,
),
)
)
I think we should be able to do something like this to check the progress:
fetch(location.href, {
method: "HEAD"
}).then(response => {
// overall percentage for all uploads in the current session:
response.headers.get("x-upload-progress")
// overall percentage for the "my-upload-thing" form:
response.headers.get("x-upload-progress--my-upload-thing")
// percentage of just the individual files
response.headers.get("x-upload-progress--my-upload-thing--photos-0")
response.headers.get("x-upload-progress--my-upload-thing--photos-1")
});