How to upload image with preview in react js - reactjs

Question

I have a reactjs application. I would like to know how to upload image with preview. Please advise.

Answer 1

you must read this mdn document about FileReader.
And then, based on your understand, you can apply like this.
export default () => {
const [preview, setPreview] = useState(null);
const fileHandler = evt => {
const f = evt.target.files[0];
if (f) {
const reader = new FileReader();
reader.onload = ({ target: { result } }) => {
setPreview(result);
};
reader.readAsDataURL(f); // you can read image file as DataURL like this.
} else {
setPreview(null);
}
};
return (
<div>
<input
type="file"
accept="image/*"
onChange={fileHandler}
/>
{ preview && <img src={preview} /> }
</div>);
}

Answer 2

The following illustrated code example is a part of my project.
As long as if you aren't following strict react pratices then this should work really well. You can change the styling as per your needs.
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
const imageHandler = () => {
const inpFile = document.getElementById('inpFile');
const previewContainer = document.getElementById('imagePreview');
const previewImage = previewContainer.querySelector('.image-preview__image');
const previewDefaultText = previewContainer.querySelector('.image-preview__default-text');
inpFile.addEventListener('change', function() {
const file = this.files[0];
if (file) {
const reader = new FileReader();
previewDefaultText.style.display = 'none';
previewImage.style.display = 'block';
reader.addEventListener('load', function() {
previewImage.setAttribute('src', this.result);
});
reader.readAsDataURL(file);
} else {
previewDefaultText.style.display = null;
previewImage.style.display = null;
previewImage.setAttribute('src', '');
}
});
};
return (
<div>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />
<div className="login">
<div className="reg-container">
<div className="profile-pic">
Add your Profile Picture:
<div className="add-picture">
<div className="image-preview" id="imagePreview">
<div className="card-image" />
<img alt="" className="image-preview__image" />
<span className="image-preview__default-text" />
</div>
<input
onClick={imageHandler}
type="file"
name="inpFile"
id="inpFile"
accept="image/*"
/>
<div className="label-holder">
<label className="image-upload" for="inpFile">
<i className="material-icons">add_photo_alternate</i>
Choose your Photo
</label>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
}
export default App;
and obviously the styling file App.css
#import url('https://fonts.googleapis.com/css?family=Lato|Varela+Round&display=swap');
*{
margin: 0;
padding: 0;
}
.profile-pic {
font-family: 'Varela Round', sans-serif;
text-align: center;
padding: 1rem;
padding-top: 0;
padding-bottom: 0;
font-weight: bold;
font-size: 1.5rem;
}
/* ============================== */
.add-picture{
margin: auto;
font-size: 1rem;
display: flex;
text-align: center;
flex-direction: column;
justify-content: center;
align-items: center;
font-family: 'Lato', sans-serif;
}
.image-preview{
width: 120px;
min-height: 150px;
border: 5px solid black;
margin-top: 15px;
border-radius: 15px;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #000;
outline: none;
z-index: ;
}
.image-preview__image{
display: none;
width: 100%;
height: 150px;
display:block;
object-fit: cover;
z-index: -11;
}
span{
/* background-image: url("../blank_user.webp"); */
width: 120px;
height: 150px;
background-size: cover;
background-position: center;
z-index: -9;
position: absolute;
border-radius: 15px;
outline: none;
}
#inpFile[type="file"]{
display:none;
margin-top: 20px;
}
.label-holder{
width: 200px;
height: 50px;
margin-top: 1rem;
}
.image-upload{
color: white;
background-color: black;
border: 1px solid #000;
display: inline-block;
padding: 6px 12px;
cursor: pointer;
font-family: 'Lato', sans-serif;
display: flex;
justify-content: center;
border-radius: 50px;
}
.description {
font-family: 'Varela Round', sans-serif;
text-align: center;
padding: 1rem;
padding-top: 0;
font-weight: bold;
font-size: 1.5rem;
}
.description textarea{
font-family: 'Lato', sans-serif;
font-size: 1rem;
background: none;
width: 350px;
height: 100px;
border: 2px solid black;
border-radius: 10px;
outline: none;
text-align: center;
}
#media screen and (max-width:550px){
.description textarea{
width: 260px;
}
}
Consider watching this Tutorial and other online article
you can also add the state management to the <input/>