Using multi-part form data in Remix

By default, form data is encoded using the application/x-www-form-urlencoded encoding type. URL-encoded form data appends the form data as key-value pairs to the request URL as search parameters. To attach files to HTML forms, we need to change the form’s encoding type. Appending form data to the URL is not the right approach when transferring binary data such as files. In this section, you will learn how to use multi-part encoding to support file uploads.

There are three different encoding types for HTML form elements:

• application/x-www-form-urlencoded
• multipart/form-data
• text/plain

text/plain is not what we are looking for. Plaintext encoding is not used for client-server communication as it submits the data in a human-readable format. Instead, we want to use multipart/form-data encoding, which places the form data into the request body, making it possible to include and stream binary files.

Let’s update...