Load testing file uploads

In order to load test a file upload we first need to understand the request a browser makes when it submits a form that includes file(s) for upload. A basic form with a text input and a file upload might look something like this:

<form method="POST" action="/test/form" enctype="multipart/form-data">
  <input type="text" name="text-input">
  <input type="file" name="data-file">
  <input type="submit" name="submit" value="submit">
</form>

The network tab in Chrome's dev tools will show us what the request looks like when this form is submitted:

The most important parts here are the Content-Type header and the payload itself. Each input field in the form has a separate part in the request, separated from the others by the boundary defined in the Content-Type header. Building a request like this from scratch can be a little tedious, but luckily we can copy and paste from the dev tools right into loader, and most of the work is done for us by Chrome; the only part the dev tools do not show is the actual file content, so we will need to add that once the overall structure of the request payload is in place.

Select POST as the request method, create a content-type header, and use the raw POST body value to create a test in loader.io that will load-test this file upload:

Next, copy and paste the data from the file you intend to upload into the correct part of the request. In this example, we need to find the section named "data-file" and insert the data just before the next boundary line:

------WebKitFormBoundary1TCKTimUw6xZMRND
Content-Disposition: form-data; name="data-file"; filename="data.txt"
Content-Type: text/plain

some data in a file     <-- insert data from your file here
------WebKitFormBoundary1TCKTimUw6xZMRND

If your file upload expects an image or other binary data, you could submit it base64-encoded, since you can't paste binary data into the raw POST body field. That might look something like this:

------WebKitFormBoundary1TCKTimUw6xZMRND
Content-Disposition: form-data; name="data-file"; filename="data.txt"
Content-Type: image/png
Content-Encoding: base64

iVBORw0KGgoAAAANSUhEUgAAA8cAAAJWCAIAAAD6IGJfAAAAA3NCSVQICAjb4U/gAAAgAElEQVR4
Xuy9edxV0/v//47medKMNNBgiEhJiYwZMk8lRYYkRCEiQ4bKkFKGQu8oQ0pmZShzqEho0oAmheY5
+j3frs9jffdv73P2Ofd9hvZ936/7j/txztprr+G51ln7ta51rbUL7dq16z/x/xYtWlSnTp3413VF
...more image data...
QIAAAQIECBDIKSBV59yrqQgQIECAAAECBHoKSNU9tfUiQIAAAQIECBDIKfAF9gHGw1k1t0EAAAAA
SUVORK5CYII=
------WebKitFormBoundary1TCKTimUw6xZMRND

Note the additional `Content-Encoding` header.