How to create a add image input in formik - reactjs

Question

I want to create a customized input field in formik for an image upload. I want to pass binary file data to backend, but it is taking the file location. Can you help me?
Here is the boilerplate code:
import React from 'react';
import { useField } from 'formik';
import { Form, Col, Row } from 'react-bootstrap';
const FileInput = ({ label, ...props }) => {
const [field, meta] = useField(props);
return (
<>
<Form.Group as={Row} controlId="">
<Form.Label htmlFor={props.id || props.name} column sm={3}>
{label}
</Form.Label>
{props.initalImage ? (
<img height="35px" alt={props.initalImage} src={props.initalImage} />
) : null}
<Col sm={4}>
<Form.Control
{...field}
{...props}
accept={props.accept}
isValid={meta.touched && !meta.error}
isInvalid={Boolean(meta.touched && meta.error)}
/>
{meta.error ? (
<>
<Form.Control.Feedback type="invalid">
{meta.error}
</Form.Control.Feedback>
</>
) : null}
<span className="form-text text-muted mt-3">
Please choose an icon which is min. 256x256px.
</span>
</Col>
</Form.Group>
</>
);
};
export { FileInput };
and here is where I am calling it:
<FileInput
label="Light Icon:"
type="file"
name="lightIcon"
accept="image/x-png"
onBlur
/>
I tried this but it is not working:
<FileInput
label="Light Icon:"
type="file"
name="lightIcon"
accept="image/x-png"
onBlur
onChange={(e) => {
setFieldValue('lightIcon', e.target.files[0]);
}}
/>

Answer 1

The trick with <input> elements with type="file" is that we shouldn't set their value manually, it actually uses it's own mechanism along with browser's security implementations and set it itself on the client's machine.
So we don't have access to the real path of the file on the disk, instead we are able to use a FileReader object to asynchronously read contents of the file as blob of buffer and pass it to our parent component.
There are cases where you can change file input's value
programmatically, like to null to reset your input.
The following example implements an UploadFiled component with type="file" get wrapped with a custom Field component, whenever child component getting update, a file is being uploaded, and parent component will knows and starts reading the contents of the specified Blob, once finished, the result attribute contains a data url representing the file's data will set as it's value. It currently accepts an image base on the validation that is set for it using Yup.
The traditional application/json type won’t help in uploading the image to your server, the FormData will. You need to write your handleSubmit() using the form data and pass the values handled by Formik.
Check my CodeSandbox for the working demo.
const handleSubmit= () => {
// Create an object of formData
const formData = new FormData();
// Update the formData object
formData.append("myFile", file, file.name);
// Details of the uploaded file
console.log(file);
// Request made to the backend api
// Send formData object
axios.post("api/uploadfile", formData);
};
// UploadForm.jsx
import React, { useState, useEffect } from "react";
import { Field, useField } from "formik";
import { Grid, FormHelperText } from "#material-ui/core";
import UploadField from "../../FormFields/UploadField";
import Thumb from "../Helper/Thumb";
const ImageForm = (props) => {
const {
formField: { image }
} = props;
const [field, meta, helper] = useField(image.name);
const { touched, error } = meta;
const { setValue } = helper;
const isError = touched && error && true;
const { value } = field;
const [fileName, setFileName] = useState(value.name);
const [file, setFile] = useState(value.file);
const [src, setSrc] = useState(value.src);
const _onChange = (e) => {
let reader = new FileReader();
let file = e.target.files[0];
if (file) {
reader.onloadend = () => setFileName(file.name);
if (file.name !== fileName) {
reader.readAsDataURL(file);
setSrc(reader);
setFile(file);
}
}
};
useEffect(() => {
if (file && fileName && src) {
setValue({ file: file, src: src, name: fileName });
console.log(fileName);
}
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [src, fileName, file]);
return (
<React.Fragment>
<Grid container spacing={3} justify="center" alignItems="center">
<Grid item xs={12}>
<label>
{image.label}
</label>
<br />
<div
style={{
display: "flex",
justifyContent: "flex-start",
fontSize: "1.2em"
}}
>
<Field
variant="outlined"
field={field}
component={UploadField}
onChange={_onChange}
isError={isError}
/>
{isError && <FormHelperText color={"red"}>{error}</FormHelperText>}
</div>
</Grid>
<Grid item>{file && src && <Thumb file={file} src={src}></Thumb>}</Grid>
</Grid>
</React.Fragment>
);
};
export default ImageForm;
import React from "react";
import { Field } from "formik";
const UploadField = ({
field,
form: { touched, errors },
name,
label,
isError,
...props
}) => {
return (
<>
<Field
variant="outlined"
name="uploader"
title={label}
type={"file"}
{...props}
/>
</>
);
};
export default UploadField;