This lesson's interactive features are locked, please to keep using them

Multipart Uploads

Let's work with some files already!

So you might already be familiar with simple JSON/HTML form POST requests. That works great for small structured data (small strings, integers, etc.), but what about large files?

We don't typically send massive files as single JSON payloads or forms. Instead, we use a different encoding format called multipart/form-data. In a nutshell, it's a way to send multiple pieces of data in a single request and is commonly used for file uploads. It's the "default" way to send files to a server from an HTML form.

Luckily, Bun has built-in support for parsing multipart/form-data requests. BunRequest extends the Request interface, which has a formData() method.

export async function handlerUploadThumbnail(cfg: ApiConfig, req: BunRequest) {
   // validate the request

  const formData = await req.formData();
  const file = formData.get("thumbnail");
  if (!(file instanceof File)) {
    throw new BadRequestError("Thumbnail file missing");
  }

   // read and save the image file data

Assignment

The handler for uploading thumbnails is currently a no-op. Let's get it working. We're going to keep it simple and store all image data in-memory.

Notice the type Thumbnail in src/api/thumbnails. There is a map of video IDs to thumbnail objects called videoThumbnails. This is where we're going to store the thumbnail data.

Complete the handlerUploadThumbnail function. It handles a multipart form upload of a thumbnail image and stores it in the videoThumbnails map:

Authentication has already been taken care of for you, and the video's ID has been parsed from the URL path.
Parse the form data
1. Use req.formData() to parse the form data
Get the image data from the form
1. Use get on the parsed form data. The key the web browser is using is called "thumbnail"
2. Check if the object is an instance of File. If not, throw a BadRequestError, which can be found in src/api/errors
3. Set a const MAX_UPLOAD_SIZE to 10MB. I just bit-shifted the number 10 to the left 20 times to get an int that stores the proper number of bytes. If the file's size property is greater than the max upload size, throw a BadRequestError
4. Get the media type from the file's type property

Bit shifting is a way to multiply by powers of 2. 10 << 20 is the same as 10 * 1024 * 1024, which is 10MB.

Read all the image data into a ArrayBuffer using the file's arrayBuffer method.
Get the video's metadata from the SQLite database. You can use the getVideo method available in db/videos
- If the authenticated user is not the video owner, throw a UserForbiddenError error, which is available in src/api/errors
Save the thumbnail to the global map
1. Set the video's ID as the key
2. Set the values as an object matching the Thumbnail type
Generate the thumbnail URL. It should have this format:

http://localhost:<port>/api/thumbnails/<videoID>

Update the video metadata so that it uses the new thumbnail URL, then update the record in the database by using the updateVideo function available in db/videos.

This will all work because the api/thumbnails/:videoID endpoint serves thumbnails from that global map.

Respond with updated JSON of the video's metadata. Use the provided respondWithJSON function and pass it the updated video to marshal.
Test your handler manually by using the Tubely UI to upload the boots-image-horizontal.png image. You should see the thumbnail update in the UI!

Run and submit the CLI tests.

If you try to upload a different image, the browser might cache and show the old one. We'll deal with that later.