How to get the binary content of an uploaded file?

[ric980]

Hello,

I've tried everything and I am going crazy. I cannot get the binary content of an uploaded file. This is my action code:

export const action = async ({request}: ActionArgs) => {
  // const uploadHandler: UploadHandler = async ({data}) => {
  //   let a = ''
  //   for await (let chunk of data) {
  //     a += chunk
  //   }
  //
  //   const response = await httpPost('http://localhost:3000/', a)
  //   console.log(response.status)
  //   console.log(response)
  //   return 'ok'
  // }

  const uploadHandler = unstable_createMemoryUploadHandler({maxPartSize: 500_000})

  const form = await unstable_parseMultipartFormData(request, uploadHandler)
  console.log(form)

  const file = form.get('file') as string
  console.log(file)

  return json({})
}

This code prints:

FormData {}
null

You can see also the commented code as I've tried to create my own upload handler. Not working. I've tried to use the Remix memory handler. Not working. Please, tell me what am I doing wrong?

Thanks.

[kiliman]

Here's a sample:

https://stackblitz.com/edit/remix-run-remix-shx966?file=app%2Froutes%2F_index.tsx

export async function action({ request }: ActionArgs) {
  const uploadHandler = unstable_createMemoryUploadHandler({
    maxPartSize: 500_000,
  });

  const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler
  );
  // Remix sets files in FormData as a File object
  const file = formData.get('file') as File;
  // Convert the file to a Blob
  const blob = new Blob([file]);
  // Get the contents as an ArrayBuffer
  const data = await blob.arrayBuffer();
  // Do what you want with the data
  // Like convert to base64
  const base64 = Buffer.from(data).toString('base64');
  // Or just a plain text string
  const text = Buffer.from(data).toString();

  return json({ name: file.name, size: file.size, base64, text });
}

[kiliman]

NOTE: Also, you can't just console.log(formData). It's not a regular object. You should either use the .get() method, or you can convert to an object using Object.fromEntries(formData). Be careful if your form has multiple inputs with the same name. If so, Object.fromEntries() will only use the last one. You should use formData.getAll('name') for multi-value inputs.

[ric980]

Thank you very much. I've used your example and got everything working. Thank you again.