This is a simple example of using the remix built-in uploadHandler and Form with multipart data to upload a file with the built-in local uploader and upload an image file to S3 with a custom uploader and display it. You can test it locally by running the dev server and opening the path /s3-upload in your browser.

The relevent files are:

├── app
│   ├── routes
│   │   ├── s3-upload.tsx // upload to S3
│   └── utils
│       └── s3.server.ts  // init S3 client on server side
|── .env // holds AWS S3 credentails

• Sign up for an AWS account - this will require a credit card
• Create an S3 bucket in your desired region
• Create an access key pair for an IAM user that has access to the bucket
• Copy the .env.sample to .env and fill in the S3 bucket, the region as well as the access key and secret key from the IAM user

Note: in order for the image to be displayed after being uploaded to your S3 bucket in this example, the bucket needs to have public access enabled, which is potentially dangerous.

⚠️ Lambda imposes a limit of 6MB on the invocation payload size. If you use this example with Remix running on Lambda, you can only update files with a size smaller than 6MB.

Open this example on CodeSandbox:

• Handle Multiple Part Forms (File Uploads)
• Upload Handler
• Custom Uploader