How HTTP Uploads Work

By on

If you don’t like adding an external library to your project just for a single feature, you’d mostly like to implement it yourself.

How uploads work

The best way to learn about network protocols is by Packet Capture, So let us create a file named upload.html

<html>
    <body>
        <form action="https://localhost/upload.php" method="post"enctype="multipart/form-data">
            <label for="file">Filename:</label>
            <input type="file" name="file" id="file" /> 
            <br />
            <input type="submit" name="submit" value="Submit" />
        </form>
    </body>
</html>

Then create a file named upload.php on your server:

<?php
    if ($_FILES["file"]["error"] > 0)
    {
        echo "ERROR : " . $_FILES["file"]["error"];
    }
    else
    {
        echo "ok";
    }
?>

You should use a packet capture app like Fiddler

Then open this html file in your browser, you’ll find an upload body in Fiddler after uploading a file.

It is worth noticing that there is a header like Content-Type: multipart/form-data; boundary=----WebKitFormBoundarymqPli0Nio8W8mU3Z, this is an important part when uploading a file. Boundary parameters are used to split files if you upload more than 1 files once. (Like & in GET), and it can be defined as any characters. (According to html - What is the boundary in multipart/form-data? - Stack Overflow)

So the formate is

--boundary
Content-Disposition: form-data; name="file"; filename="FILE NAME"
Content-Type: MIME Type

UPLOAD CONTENT

--boundary
Content-Disposition: form-data; name="submit"

Submit
--boundary--