Upload Multiple files from input type files with attribute multiple

[ethaneisenhard]

I am trying to upload multiple files from one input tag with the attribute multiple. How do i return the multiple files selected from the fileUploadHandler. I do not see any examples of this anywhere online. Only for one file! Thank you for the help!

import {
  json,
  LoaderArgs,
  unstable_parseMultipartFormData,
} from "@remix-run/node";
import { Form } from "@remix-run/react";
import { fileUploadHandler } from "~/fileUpload/index.server";

// import { fileUploadHandler } from "~/fileUpload/index.server";

// File for file Upload is in .server for bundle
// import {
//   unstable_composeUploadHandlers, unstable_createFileUploadHandler, unstable_createMemoryUploadHandler
// } from "@remix-run/node";

// export const fileUploadHandler = unstable_composeUploadHandlers(
//   unstable_createFileUploadHandler({
//     avoidFileConflicts: true,
//     file: ({ filename }) => filename,
//     maxPartSize: 5_000_000,
//   }),
//   unstable_createMemoryUploadHandler()
// );

export const meta = () => ({
  charset: "utf-8",
  title: "MultiFormTemplate",
  viewport: "width=device-width,initial-scale=1",
});

export let loader = async ({ request }: LoaderArgs) => null;

export async function action({ request }: ActionArgs) {
  const errors = {};
  const response = new Response();

  try {
    const form = await unstable_parseMultipartFormData(
      request,
      fileUploadHandler
    );
    const multipleFiles = form.get("multiple-files");
    const FirstName = form.get("FirstName");
    const values = {
      FirstName: FirstName,
    };
    // // validate the fields
    if (!FirstName) {
      errors.FirstName = "First name is required";
    }
    // return data if we have errors
    if (Object.keys(errors).length) {
      return json({ errors, values });
    }

    //How do i get multiple files here!! Only returns one!!
    console.log(multipleFiles);

    // else return the error
    return json(values, {
      status: 200,
      headers: { "Cache-Control": "no-store" },
    });
  } catch (errors) {
    console.log("errors", errors);
    return json({ errors }, { status: 500 });
  }
}

export default function MultiFormTemplate() {
  return (
    <div>
      <h4>MultiFormTemplate</h4>
      <Form method="post" encType="multipart/form-data">
        <input id="FirstName" name="FirstName" />
        <label htmlFor="multiple-files">Multiple Photos</label>
        <input type="file" id="multiple-files" name="multiple-files" multiple />
        <button type="submit">Submit</button>
      </Form>
    </div>
  );
}

[miradontsoa]

Hi, you need to use getAll instead of get. It will store the files in a Blob array.
So in your action function, do:

const multipleFiles = form.getAll("multiple-files");