#i want to submit a xlsx file and use it in action function

1 messages · Page 1 of 1 (latest)

leaden walrus
#

Hey guys. I want to upload a xlsx file in the form and then use read this xlsx file in my action function. I tried many things but that is my most recent code :

import { unstable_createFileUploadHandler } from "@lone berry-run/node";
import { Form } from "@lone berry-run/react"
import { LoaderArgs, unstable_createMemoryUploadHandler, unstable_parseMultipartFormData } from "@lone berry-run/server-runtime"

const XLSX = require("xlsx")

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

const formData = await unstable_parseMultipartFormData(
    request,
    uploadHandler // <-- we'll look at this deeper next
  );

const excelFile = formData.get("excel");

const workbook = XLSX.readFile(excelFile)
const worksheet = workbook.Sheets[workbook.SheetNames[0]]
console.log(worksheet)
const data = []
for (let index = 1; index < 5; index++){
    const vereinsName = worksheet[`A${index}`].v
    const email = worksheet[`B${index}`].v

    console.log({
        vereinsName:vereinsName, email:email
    })
    data.push({
        vereinsName:vereinsName, email:email
    }) 
}
return data

}
export default function ExcelReader (){
return(
<div>
<Form method="post">
<input type="file" name="excel" id="excel" />
<button>submit</button>
</Form>
</div>
)
}

uneven forge
#

I haven't tried file uploads in remix but did you see the part about the file being a File instance? If I remember correctly you'd need to create a read stream and walk through outputting it to a buffer, then you can stringify that to get the actual xslx content. Unless that XLSX.readFile wraps all of that for you?

leaden walrus
#

okay but where do i have to create a read stream? the xlsx part works when i do it with the loader and give him the correct path to the excel file