I am hoping someone can assist with this issue.

I have a React application that uses Formik for file uploading as so:

<input name={`grocreceipts`} type="file" multiple onChange={(event) => { 
         setFieldValue("grocreceipts", event.currentTarget.files);
}}/>

What this does is it then gets sent to a UploadFile function, wherein I am attempting to get it in the format that the external file upload API requires (of which that external API is this https://developers.hubspot.com/docs/api/files/files ):

async function uploadFile(file, typeSent) {

        console.log("SENT FILE:")
        console.log(file)
        let formInfo = new FormData();
        formInfo.append("file", file)
        formInfo.append("name", file.name)

        const requestOptions2 = {
            method: "POST",
            body: formInfo,
            redirect: "follow"
        };

        await fetch("/upload-files", requestOptions2)
            .then((response) => response.json())
            .then((result) => {
                console.log("RESULT?")
                console.log(result)
            })
            .catch((error) => console.error(error));
    }

which produces this on the server via Multer:

2024-06-04T14:30:47.773696+00:00 app[web.1]: {
2024-06-04T14:30:47.773936+00:00 app[web.1]:   fieldname: 'file',
2024-06-04T14:30:47.773938+00:00 app[web.1]:   originalname: '200w.gif',
2024-06-04T14:30:47.773939+00:00 app[web.1]:   encoding: '7bit',
2024-06-04T14:30:47.773939+00:00 app[web.1]:   mimetype: 'image/gif',
2024-06-04T14:30:47.773940+00:00 app[web.1]:   buffer: <Buffer 47 49 46 38 39 61 c8 00 95 00 f7 ff 00 09 6b 5c 4c 00 0c c5 a3 bc cb b3 c4 64 4b 2b 6b 4c 2a 7a 50 26 c8 9d c1 3c 02 0a c8 9c bc b9 98 af b9 96 ae c8 ... 392698 more bytes>,
2024-06-04T14:30:47.773940+00:00 app[web.1]:   size: 392748
2024-06-04T14:30:47.773941+00:00 app[web.1]: }

now from here, I am attempting to that that payload coming in and formatting it as a binary to send to the API.

I am attempting to do this by the following code on the server:

    router.post("/upload-files", upload.single("file"), async (req,res,next) => {
    console.log(req.file)

    const tempDateNow = new Date();
    const tempFileName = req.file.originalname
    var fileOptions = {
        access: 'PUBLIC_NOT_INDEXABLE',
        overwrite: true,
        duplicateValidationStrategy: 'NONE',
        duplicateValidationScope: 'ENTIRE_PORTAL',
    };

    let form = new FormData();

    let bufferTest = Buffer.from(req.file.buffer).toString("base64")
    let blobbedData = new Blob([bufferTest])

    form.append('file', blobbedData, `${tempFileName}-${tempDateNow.valueOf()}`);
    form.append('options', JSON.stringify(fileOptions));
    form.append('folderPath', 'portalUploads');

    //const headers = form.getHeaders?.() ? form.getHeaders() : { 'Content-Type': 'multipart/form-data' }

    var config = {
        method: 'post',
        maxBodyLength: Infinity,
        url: 'https://api.hubapi.com/files/v3/files',
        headers: {
            Authorization: `Bearer ${process.env.HSKEY}`,
            'Content-Type': 'multipart/form-data'
        },
        data: form,
    };

    await axios(config)
        .then(function (response) {
            console.log(JSON.stringify(response.data));
            res.status(200).send({response: response.data})

        })
        .catch(function (error) {
            console.log(error);
            res.status(400).send({errormsg: error.message})

        });

})

I’m assuming something in there is not being shaped in the way I need it and was hoping for some guidance. I am admittedly very bad at file handling in javascript!

Thank you for the assistance.