Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Upload Multiple files from input type files with attribute multiple #185

Open
ethaneisenhard opened this issue Mar 23, 2023 · 1 comment

Comments

@ethaneisenhard
Copy link

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
Copy link

miradontsoa commented Dec 1, 2023

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");

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

3 participants