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>
);
}
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!