ReactJS: How to handle Image / File upload with Formik? - reactjs

Question

I am designing a profile page for my site using ReactJS.
Now my question is how do I upload the image from local machine and save it to the database and also displaying it in the profile page
import React, {Component} from 'react';
import { connect } from 'react-redux';
import { AccountAction } from '../../actions/user/AccountPg1Action';
import { Formik, Form, Field, ErrorMessage } from 'formik';
import * as Yup from 'yup';
class AccountInfo extends Component {
constructor(props) {
super(props)
this.state = {
currentStep: 1,
userAccountData: {
userid: '',
useravtar: '',
attachement_id: '',
}
}
}
handleFileUpload = (event) => {
this.setState({useravtar: event.currentTarget.files[0]})
};
handleChange = event => {
const {name, value} = event.target
this.setState({
[name]: value
})
}
handleSubmit = event => {
let that = this;
const { AccountAction } = that.props;
event.preventDefault();
let accountInputs = {
userid: 49,
useravtar: that.state.image,
attachement_id: 478,
}
that.setState({
userAccountData: accountInputs,
})
AccountAction(accountInputs)
}
AccountInfoView = () => {
console.log(this.state.useravtar)
return (
<section id="account_sec" className="second_form">
<div className="container">
<React.Fragment>
<Formik
initialValues={‌{
file: null,
email: '',
phone: ''
}}
validationSchema={accountInfoSchema}
render={(values) => {
return(
<Form onSubmit={this.handleSubmit}>
<Step1
currentStep={this.state.currentStep}
handleChange={this.handleChange}
file= {this.state.useravtar}
handleFileUpload={this.handleFileUpload}
/>
</Form>
);
}}
/>
</React.Fragment>
)
}
render() {
return (
<div>{this.authView()}</div>
)
}
}
function Step1(props) {
console.log(props.useravtar)
if (props.currentStep !== 1) {
return null
}
return(
<div className="upload">
<label htmlFor="profile">
<div className="imgbox">
<img src="images/trans_116X116.png" alt="" />
<img src={props.useravtar} className="absoImg" alt="" />
</div>
</label>
<input id="file" name="file" type="file" accept="image/*" onChange={props.handleFileUpload}/>
<span className="guide_leb">Add your avatar</span>
</div>
)
}
When I do console in handleChange action for event.target.file[0] it responds with undefined.
Also, doing a console.log(this.state.useravtar) in handleSubmit action it shows a pathname like c:/fakepath/imgname.jpg
P.S: I have a multiple forms so I am using it in a Step wise. And i am using Redux Reducer for storing the data.
I have referred this link but my requirement is not looking like this.

Answer 1

Formik doesnot support fileupload by default, But you can try the following
<input id="file" name="file" type="file" onChange={(event) => {
setFieldValue("file", event.currentTarget.files[0]);
}} />
Here "file" represents the key that you are using for holding the file
And on submit you can get the filename, size etc for the file by using
onSubmit={(values) => {
console.log({
fileName: values.file.name,
type: values.file.type,
size: `${values.file.size} bytes`
})
If you want to set the file into components state then you can use
onChange={(event) => {
this.setState({"file": event.currentTarget.files[0]})};
}}
According to your code, you have to handle file upload as below
In AccountInfo add a function to handle file upload
handleFileUpload = (event) => {
this.setState({WAHTEVETKEYYOUNEED: event.currentTarget.files[0]})};
}
And pass the same function to Step1 Component as below
<Step1
currentStep={this.state.currentStep}
handleChange={this.handleChange}
file= {this.state.image}
handleFileUpload={this.handleFileUpload}
/>
In Step1 Component where you upload the file, Change the input as
<input id="file" name="file" type="file" accept="image/*" onChange={props.handleFileUpload}/>
If you need to preview the uploaded image then you can create a blob and pass the same as source for image as below
<img src={URL.createObjectURL(FILE_OBJECT)} />
EDIT-1
As URL.createObjectURL method is deprecated due to security issues, we need to use srcObject for Media Elements, to use that you can use ref to assign srcObject, for example
Assuming you are using class Components,
Constructor
in constructor you can use
constructor(props) {
super(props)
this.imageElRef = React.createRef(null)
}
HANDLE CHANGE FUNCTION
handleFileUpload = (event) => {
let reader = new FileReader();
let file = event.target.files[0];
reader.onloadend = () => {
this.setState({
file: reader.result
});
};
reader.readAsDataURL(file);
}
Element
<img src={this.state.file} />

Answer 2

Here is how I resolved it with Formik and Material UI
in your JS file, just declare a variable avatarPreview like below
const [avatarPreview, setAvatarPreview] = useState('/avatars/default.png');
<Box
display='flex'
textAlign='center'
justifyContent='center'
flexDirection='column'>
<ImageAvatar size='md' src={avatarPreview || user?.avatar} />
<Button
variant='contained'
component='label'
startIcon={<CloudUploadIcon />}>
Choose Avatar
<input
name='avatar'
accept='image/*'
id='contained-button-file'
type='file'
hidden
onChange={(e) => {
const fileReader = new FileReader();
fileReader.onload = () => {
if (fileReader.readyState === 2) {
setFieldValue('avatar', fileReader.result);
setAvatarPreview(fileReader.result);
}
};
fileReader.readAsDataURL(e.target.files[0]);
}}
/>
</Button>
</Box>
Default Preview:
After choosing avatar:

Answer 3

You can upload single or multiple files with validation using Formik as follows:
import "./App.css";
import { useEffect, useState } from "react";
import * as Yup from "yup";
import { Formik, Field, Form, ErrorMessage, useField } from "formik";
import axios from "axios";
function App() {
return (
<Formik
initialValues={{
profile: [],
}}
validationSchema={Yup.object({
profile:Yup.array().min(1,"select at least 1 file")
})}
onSubmit={(values, props) => {
let data = new FormData();
values.profile.forEach((photo, index) => {
data.append(`photo${index}`, values.profile[index]);
});
axios
.post("you_api_for_file_upload", data, {
headers: {
"Content-Type": "multipart/form-data",
},
})
.then((response) => {
console.log(response);
})
.catch((err) => {
console.log(err);
});
}}
>
{(formik) => {
return (
<>
<Form>
<input
id="file"
name="profile"
type="file"
onChange={(event) => {
const files = event.target.files;
let myFiles =Array.from(files);
formik.setFieldValue("profile", myFiles);
}}
multiple
/>
<ErrorMessage name="profile"/>
<button type="submit" disabled={formik.isSubmitting}>
Submit
</button>
</Form>
</>
);
}}
</Formik>
);
}
export default App;
Note: you can customize min(your choice, "your message") as per your need.
validationSchema={Yup.object({
profile:Yup.array().min(1,"select at least 1 file")
})}

Answer 4

FormIk does not support file uploading and we need to do it in custom way.
Just trigger onChange event and set the file.
If you face any error of setFieldValue in TypeScript, then you simply do this:
onChange={(event) => {
if (event.currentTarget.files) {
formik.setFieldValue(
"file",
event.currentTarget.files[0]
);
}

Answer 5

To handle file in formik with backend all you need to do add the input given below (you can change avatar to anything you want):
<input
type="file"
name="avatar"
onChange={(event) => {
setFieldValue('avatar', event.currentTarget.files[0]);
}}
/>
onSubmit you can access file using values obj like values.avatar.
On server-side (express) to access the file we use req.file
You also have to use multer that will automatically detect file to handle it on the server-side

Answer 6

To handle file in formik with backend all you need to do add the input given below (you can change avatar to anything you want):
<input
type="file"
name="avatar"
onChange={(event) => {
setFieldValue('avatar', event.currentTarget.files[0]);
}}
/>
onSubmit you can access file using values obj like values.avatar.
On server-side (express) to access the file we use req.file You also have to use multer & cloudinary that will detect file to handle it on the server-side

Answer 7

I used simple trick
<Field name="image">
{ (form , meta , value ) =>
const {setFieldValue} = form
return (
<input name="image" type="file" onChange={(e) => setFieldValue(e.target.file[0])}
)
}
</Field>
for multiple image
<input name="image" type="file" onChange={(e) => setFieldValue(e.target.files)}
or use loop
for( i=0 ; i < e.target.file; i++){
setFieldValue([...image , e.target.file])
}