How to display a image selected from input type = file in reactJS
hope it works for you
<form onSubmit={form => submitForm(form)}>
<input
accept="image/*"
onChange={onImageChange}
className={classes.inputImage}
id="contained-button-file"
multiple
name="image"
type="file"
/>
<label htmlFor="contained-button-file">
<IconButton component="span">
<Avatar
src={mydata.imagePreview}
style={{
margin: "10px",
width: "200px",
height: "200px"
}}
/>
</IconButton>
</label>
<Button
type="submit"
variant="outlined"
className={classes.button}
>
Default
</Button>
</form>
onImageChange
const onImageChange = event => {
if (event.target.files && event.target.files[0]) {
let reader = new FileReader();
let file = event.target.files[0];
reader.onloadend = () => {
setData({
...mydata,
imagePreview: reader.result,
file: file
});
};
reader.readAsDataURL(file);
}
};
submitForm
const submitForm = form => {
form.preventDefault();
const formData = new FormData();
formData.append("image", mydata.file);
// for (var pair of formData.entries()) {
// console.log(pair[1]);
// }
const config = {
headers: {
"content-type": "multipart/form-data"
}
};
axios
.post("api/profile/upload", formData, config)
.then(response => {
alert("The file is successfully uploaded");
})
.catch(error => {});
};
Try this
<input type="file" onChange={this.onImageChange} className="filetype" id="group_image"/>
Add method to class
onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
let reader = new FileReader();
reader.onload = (e) => {
this.setState({image: e.target.result});
};
reader.readAsDataURL(event.target.files[0]);
}
}
or you can use URL.createObjectURL
onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
this.setState({
image: URL.createObjectURL(event.target.files[0])
});
}
}
And display image
<img id="target" src={this.state.image}/>
For the hook version:
const [image, setImage] = useState(null)
const onImageChange = (event) => {
if (event.target.files && event.target.files[0]) {
setImage(URL.createObjectURL(event.target.files[0]));
}
}
return (
<div>
<input type="file" onChange={onImageChange} className="filetype" />
<img src={image} alt="preview image" />
</div>
)
Recently I came across needing a similar feature. Here is my implementation using hooks
.
export default function App() {
const [image, setImage] = React.useState("");
const imageRef = React.useRef(null);
function useDisplayImage() {
const [result, setResult] = React.useState("");
function uploader(e) {
const imageFile = e.target.files[0];
const reader = new FileReader();
reader.addEventListener("load", (e) => {
setResult(e.target.result);
});
reader.readAsDataURL(imageFile);
}
return { result, uploader };
}
const { result, uploader } = useDisplayImage();
return (
<div className="App">
<input
type="file"
onChange={(e) => {
setImage(e.target.files[0]);
uploader(e);
}}
/>
{result && <img ref={imageRef} src={result} alt="" />}
</div>
);
}
I created a custom hook
so that it can be reused anywhere in the app. The hook
returns the image src
and the uploader
function
.
The image src
can then be linked to the <img src={..} />
and then on input
change you can just pass in the e
to the uploader
function
.