Upload files React.js - reactjs

Question

Save images in the MongoDB database after uploading from the React.js.
I want to save the file's path(only) along with other data like template's name, package_ids etc...
Following is the templateCreate action:
export const createTemplate = (templateData) => async (dispatch, getState) => {
try {
dispatch({ type: TEMPLATE_CREATE_REQUEST });
const {
adminLogin: { adminInfo },
} = getState();
const config = {
url: "http://localhost:8000/v1/template/create",
method: "POST",
data: templateData,
headers: {
"Content-Type": "application/json",
"x-access-token": adminInfo.data.JWToken,
},
};
const { data } = await axios(config).catch(console.error);
dispatch({ type: TEMPLATE_CREATE_SUCCESS, payload: data });
} catch (error) {
dispatch({
type: TEMPLATE_CREATE_FAILURE,
payload:
error.response && error.response.data.message
? error.response.data.message
: error.message,
});
}
};
The createTempleteReducer function:
export const templateCreateReducer = (state = {}, action) => {
switch (action.type) {
case TEMPLATE_CREATE_REQUEST:
return { loading: true };
case TEMPLATE_CREATE_SUCCESS:
return { loading: false, success: true, template: action.payload };
case TEMPLATE_CREATE_FAILURE:
return { loading: false, error: action.payload };
default:
return state;
}
};
The templateScreen:
return (
<>
<FormContainer>
<h2 className="template-h2">Create New Template</h2>
<Form onSubmit={submitHandler}>
<Form.Group controlId="preview_image">
<Form.Label>Select Preview Image</Form.Label>
<Form.Control
type="file"
accept=".png, .jpg, .jpeg .pdf"
name="preview_image"
/>
</Form.Group>
...other fields
</Form>
</FormContainer>
</>
);
The submitHandler function:
const submitHandler = (e) => {
e.preventDefault();
const formData = new FormData();
formData.append("name", name);
formData.append("package_ids", JSON.stringify(package_ids));
formData.append("preview_image", preview_image);
formData.append("html_template", html_template);
formData.append("required_variables", required_variables);
console.log(preview_image);
const config = {
headers: {
"Content-Type": "application/json",
"x-access-token": adminInfo.data.JWToken,
},
};
dispatch(createTemplate(formData));
};
It saves the data to the database but preview_image is saved as 'C:\\fakepath\\2021_Facebook_icon.jpg' I'm not sure from where the fakepath came. and it is also not uploading the image in the uploads folder
The useEffect hook which currently just lists the package data from the database:
useEffect(() => {
dispatch(listPackages());
}, [dispatch]);
Now what to do next to save all the data to the database using useEffect and createTemplate action function. I am using multer in the backend(Node.js)