Post a file /contents of a file to endpoint with Formik - post

Question

I would like to create a form that allows the user to upload a file (a JSON object) and then post the contents of that file to an api.
I would like to see (for now just in a console log) the contents of the file I am about to post before I post it. So the flow should go like this
User sees a blank form with an upload file field
User selects a file from their computer
Once selected, I would like to log the contents of the file to the console
Once form is submitted, I would like to post the file to an endpoint with axios
I am using the useFormik hook because I have used it elsewhere and found it more intuitive than some of Formiks other options, and because I think it will be useful for when I build a few more features, so there may be some redundant lines of code here (e.g. initialValues) but for now I'm just focused on step one - seeing the values in a file before I post them.
It seems like I should be able to upload the file, read the contents of the file, store the contents of the file in a result, then pass that result to the onSubmit callback in the eventual axios.post() request I will make.
But I don't think I'm understanding the fundamentals here.
Should I use new FormData instead of a FileReader?
Should I bother reading the contents of the file before posting?
Here's my current code:
import { useFormik } from 'formik';
export const MyUploadPerfectAssetForm = () => {
const onChange = (event: any) => {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = (e) => {
// The file's text will be printed here
console.log(e.target?.result)
const result = e.target?.result;
console.log("logging result from reader.onload " + result)
return result;
};
//shows the files values properly
reader.readAsText(file);
}
//redundant for now?
const formik = useFormik({
initialValues: {
name: null,
tags: null,
type: null,
s3URL: null,
thumbnailImageURL: null,
},
onSubmit: (values, result) => {
console.log("logging values" + JSON.stringify(values))
alert(JSON.stringify(values, null, 2));
console.log("logging values from onSubmit " + JSON.stringify(values))
const uploadPerfectAsset = async (perfectAssetValues: any) => {
//there will be an axios post request here,
console.log("upload perfect asset ran")
console.log("testing uploadPerfectAsset with result from onChange file reader result" + JSON.stringify(perfectAssetValues))
}
uploadPerfectAsset(result)
},
});
return (
<div>
<form onSubmit={formik.handleSubmit}>
<div>
<input id="file"
name="test"
type="file"
onChange={onChange}></input>
</div>
<div>
<button type="submit">Submit</button></div>
</form>
</div >
);
}
Thanks

Answer 1

You're almost there mate 😃 A couple of small changes are needed:
add file to initialState
move onChange function to after the hook useFormik() and add formik.setFieldValue("file", file); to set the value
remove argument perfectAssetValues from function uploadPerfectAsset() - it's unnecessary
export const MyUploadPerfectAssetForm = () => {
const formik = useFormik({
initialValues: {
name: null,
tags: null,
type: null,
s3URL: null,
thumbnailImageURL: null,
file: null
},
onSubmit: (values) => {
console.log("logging values from onSubmit ", values);
const uploadPerfectAsset = async () => {
//there will be an axios post request here,
console.log("upload perfect asset ran");
console.log(
"File info: ",
JSON.stringify(
{
fileName: values.file.name,
type: values.file.type,
size: `${values.file.size} bytes`
},
null,
2
)
);
};
uploadPerfectAsset();
}
});
const onChange = (event) => {
const file = event.target.files[0];
formik.setFieldValue("file", file);
const reader = new FileReader();
// temporarily show file contentx
reader.onload = (e) => {
// The file's text will be printed here
const result = e.target.result;
console.log("logging result from reader.onload " + result);
return result;
};
//shows the files values properly
reader.readAsText(file);
};
return (
<div>
<form onSubmit={formik.handleSubmit}>
<div>
<input id="file" name="test" type="file" onChange={onChange}></input>
</div>
<div>
<button type="submit">Submit</button>
</div>
</form>
</div>
);
};
Live demo