remix-uploads.js

remix.js

// New.tsx
export const action: ActionFunction = async ({ request }) => {
  const uploadHandler: UploadHandler = async ({ name, filename, stream }) => {
    if (name !== "image") {
      stream.resume();
      return;
    }

    try {
      const uploadedImage = await uploadImage(stream, filename);
      return uploadedImage;

    } catch (err) {
      console.log(err)
    }
  };

  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );
}


// Utils.ts
export async function uploadImage(
  stream: Readable,
  filename: string
): Promise<any> {
  return new Promise((resolve, reject) => {
    function uploadToS3() {
      const pass = new PassThrough();

      const uploadParams = {
        Bucket: "bucket",
        Key: `${cuid()}-${filename}`,
        Body: pass,
      };

      console.log(uploadParams);

      s3.upload(uploadParams, (err: Error, data: ManagedUpload.SendData) => {
        if (err) {
          console.log(err);
          reject(err);
        }

        if (data) {
          console.log(data);
          resolve(data.Location);
        }
      });

      return pass;
    }

    stream.pipe(uploadToS3());
  });
}