I am attempting to create an image file uploader with React that displays a preview of the file that is selected by the user. I was able to make it so that when a user selects an image, that image is previewed and is displayed correctly. However, I want a default image that I have in my ‘/images/user-solid.jpeg’ path to appear by default, and for it to be replaced by whatever image the user selects. How can I accomplish this? Any information would be appreciated, thank you!
Upload.jsx:
import '../../components/pages/styles/Uploads.css';
import {useEffect, useState} from 'react';
import {} from 'react-router-dom';
import {useSelector} from 'react-redux';
import axios from 'axios';
import authHeader from '../../services/auth-header';
function Uploads() {
const {user: currentUser} = useSelector((state) => state.auth);
const [file, setFile] = useState();
const [description, setDescription] = useState('');
const [loading, setLoading] = useState(false);
const [content, setContent] = useState('');
const imageSubmit = async (event) => {
event.preventDefault();
const formData = new FormData();
formData.append('file', file);
const result = await axios.post(
API_URL + '/image/upload',
formData,
{
headers: {...authHeader(), 'Content-Type': 'multipart/form-data'},
}
);
console.log(result.data);
};
return (
<div className='page'>
<div className='upload-card'>
{file && (
<div id='preview'>
<img
src={URL.createObjectURL(file)}
id='image'
alt='Thumbnail'
className='user-post'
/>
</div>
)}
</div>
<div className='upload-container'>
<div className='post-form-container'>
<p id='upload-form-label'>
Hello, {currentUser.username} feel free to post an image!
</p>
<form
onSubmit={profileImageSubmit}
// onSubmit={'return Validate(this);'}
className='upload-form'
>
<div className='panel'>
<div className='button_outer'>
<div className='btn_upload'>
<input
filename={file}
onChange={(e) => setFile(e.target.files[0])}
type='file'
accept='image/*'
id='image-selection-btn'
Upload
Image
></input>
Choose your Art
</div>
</div>
</div>
<button type='submit' id='post-upload-btn'>
Upload Image
</button>
</form>
</div>
</div>
</div>
);
}
export default Uploads;