Issues using uploadHandler and unstable_parseMultipartFormData

[kaydenvg]

Hi, new to Remix. Trying to pass in multiple images from a single image input field on a form and upload them to s3. I've correctly created my s3 client and am trying to use multipart form data to pass them to the upload handler, which uses the stream to upload. Problem is, my upload handler is never being called. Note the console log statements under the upload handler. They are never logged to console, whereas my fileJsons are (they just display file name).

I followed the tutorials on the docs: https://remix.run/docs/en/v1/api/remix#custom-uploadhandler, as well as other discussions here #2800 (comment) and this one post which was not very helpful as it seems to be for an older version of remix: https://www.canrau.com/en/remix-upload-to-s3

Here is my action function, as well as the Mantine DropZone component I plan to use to handle the file upload as an image input for the form:

Action function:

export const action: ActionFunction = async ({ request }) => {
  const uploadHandler: UploadHandler = async ({ name, filename, mimetype, encoding, stream }) => {
    if (name !== "images") {
      stream.resume();
      return;
    }
    const key = "key";
    //grab s3 client
    var s3 = await GetS3Client();
    console.log(s3)
    return await s3.uploadFile(stream, filename).then((data) => {
            if (data.status === 204) {
            console.log("success");
            console.log(data.location)
            return data.location;
            } else {
            throw new Error("Image upload failed")
            }
        });
  }

  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );

  const fileJsons = formData.getAll("images");
  console.log(fileJsons);
  return fileJsons;
  
};

The 'form':

  <form method="post">
     <Dropzone
         name="images"
         value={images}
         accept={['image/png', 'image/jpeg']}
         onDrop={(files) => {
         for (let i = 0; i < files.length; i++) {
             images.push(files[i])
             console.log(files[i])
             }
           }
         }
         onReject={(files) => {throw new Error(`rejected files ${files}`)}}
         maxSize={3 * 1024 ** 2}
     >
   </Dropzone>
   <Button type="submit" >Upload</Button>
 </form>

Any help would be greatly appreciated. Remix is so new, so there are a lot of questions.

[thejoyfuldev]

Few things. Try moving your uploadHandler to a separate file and name it something like storage.server.ts. The .server. will ensure remix includes it server side. Keeping it in your action function will result in an error with node fs.

You are missing the encType="multipart/form-data" on your form tag.

I created a repo you can download which is working. You will need to create .env file and add the following keys to it:

const {
  STORAGE_ENDPOINT,
  STORAGE_REGION,
  STORAGE_ACCESS_KEY,
  STORAGE_SECRET,
  STORAGE_BUCKET,
} = process.env;

https://github.com/jasonabullard/remix-prism-s3-demo