WebEngine icon indicating copy to clipboard operation
WebEngine copied to clipboard

Show upload progress in response header

Open g105b opened this issue 2 years ago • 0 comments

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")
});

g105b avatar Jan 17 '23 14:01 g105b