How to Read and Echo File Size of Uploaded File in Real Time?

Read and Echo File Size of Uploaded File Being Written in Real Time

While file upload is a common task, it can be challenging to display progress information without blocking both the server and client. This article discusses how to achieve this using a combination of server-side and client-side technologies.

Background

Consider an application where files are uploaded to a server using fetch(), with the body set to a Blob, File, TypedArray, or ArrayBuffer object. The goal is to read and echo the file size of the uploaded file in real time, so that the client can display progress as the file is being written on the server.

Server-Side Implementation (e.g., PHP)

The server-side implementation involves two scripts: 'data.php' for writing the file to the server and 'stream.php' for streaming the file size to the client.

data.php:

<code class="php">$filename = $_SERVER["HTTP_X_FILENAME"];
$input = fopen("php://input", "rb");
$file = fopen($filename, "wb");
stream_copy_to_stream($input, $file);
fclose($input);
fclose($file);
echo "upload of " . $filename . " successful";</code>

stream.php:

<code class="php">header("Content-Type: text/event-stream");
header("Cache-Control: no-cache");
header("Connection: keep-alive");

while(true) {
    $upload = $_GET["filename"];
    $data = filesize($upload);
    if ($data) {
        sendMessage($lastId, $data);
        $lastId++;
    }
}

function sendMessage($id, $data) {
    echo "id: $id\n";
    echo "data: $data\n\n";
    ob_flush();
    flush();
}</code>

Client-Side Implementation (e.g., JavaScript)

The client-side implementation uses fetch() to upload the file and an EventSource to receive the file size updates from the server.

<code class="javascript">const input = document.querySelector("input[type=file]");
const progress = document.querySelector("progress");
input.addEventListener("change", (event) => {
    const file = input.files[0];
    const request = new Request('data.php', {
        method: "POST",
        headers: { 'x-filename': file.name },
        body: file
    });
    const source = new EventSource('stream.php?filename=' + file.name);
    source.addEventListener("message", (e) => {
        progress.value = e.data;
    }, true);
});</code>

Additional Considerations

To handle potential issues with file write or read, error handling mechanisms can be incorporated. Additionally, it's important to clear the file size cache to ensure accurate file size updates.

Conclusion

By following these steps, you can achieve real-time file size reading and echoing of uploaded files, without blocking the server or client. This enables seamless progress tracking for file uploads on both the client and server side.

The above is the detailed content of How to Read and Echo File Size of Uploaded File in Real Time?. For more information, please follow other related articles on the PHP Chinese website!