This blog post was inspired by my work to incorporate uploading assets (images, music, etc.) to my Amplify backend while the app itself is written in Remix (Remix version 2).

Background: Using Amplify to upload assets in the typical SPA (single-page application) is trivial. There are several examples in the official Amplify documentation about this so I will leave that to the reader to investigate if you so please. The trouble comes in when doing the asset uploading via SSR (Server-Side Rendering). This is because of how the authorization is passed for the Amplify actions as well as how the SSR context is generated.

The first thing we want is to verify that we have amplify set up with Auth (this blog will assume you are using out-of-the-box Cognito Auth with Amplify) and Storage (this post assumes a standard S3 bucket set up with CRUD permissions for authenticated users)

The first issue I ran into was uploading the file in remix. There are several examples that I had found that potentially would work. For this post we will be using the `useFetcher` hook provided by remix. For me, this works the best because of my use of a custom photo cropper which uses `

`. This component will potentially be outsourced in another post.

Essentially what want is an event handler which will take a file object, insert it into a formData object and submit that via the fetcher.

First we create the fetcher with a unique key for this action:

const fetcher = useFetcher({key: 'upload-asset-fetcher'});

Next we can add our handler which assumes it will be passed in a file Blob of the asset to be uploaded.

const handleUpload = async (file: File) => {

    fetcher.submit(formData, { method: 'POST', encType: 'multipart/form-data'});

Now in Remix we need to define our action function to be able to accept this multipart form. This is where the code gets a bit hacky. I will update the blog post if a better/easier approach is proposed. For now, our action looks like this:

export const action:ActionFunction=async ({ request }) => {

const formData=await unstable_parseMultipartFormData(request,async ({name,contentType,data,filename, }):Promise<string|File|null|undefined> => {const dataArray1= [];
for await (const x of data) {dataArray1.push(x); }
if (!name||name!=="file") {

    const uiarr=dataArray1[0] as Uint8Array;

const blob=new Blob(dataArray1, { type:"image/jpeg" });

   return {error:"No key or file provided", };

Uploading Assets using Amplify with Remix 2

Welcome to my personal blog. I will be using this to write down things I'm thinking about or doing. There will be personal posts as well as posts about things I'm coding on. Started this because I have figured out a few things for my personal projects and I wanted to have a place to write how I figured them out. I also thought people might like to hear what a 30-something trans chick might be thinking about. Who knows!

Dani's Blog.

Welcome to My Blog

More Stories

Uploading Assets using Amplify with Remix 2