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! Here is a codesandbox link: https://codesandbox.io/s/silly-mountain-ynp569?file=/src/App.js

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;

CodePudding user response：

Easy take a look at this code:

import "./styles.css";
import { useEffect, useState } from "react";
import {} from "react-router-dom";
import { useSelector } from "react-redux";
import axios from "axios";

export default function App() {
  const [file, setFile] = useState();
  const [description, setDescription] = useState("");
  const [loading, setLoading] = useState(false);
  const [content, setContent] = useState("");
  const [preview, setPreview] = useState(null);

  const onAddImage = (file) => {
    window.URL.revokeObjectURL(preview);
    setPreview(window.URL.createObjectURL(file));
  };

  return (
    <div className="page">
      <div className="upload-card">
        <div id="preview">
          <img
            src={preview || require("./assets/user-solid.jpeg")}
            id="image"
            alt="Thumbnail"
            className="user-post"
          />
        </div>
      </div>
      <div className="upload-container">
        <div className="post-form-container">
          <p id="upload-form-label">Hello, feel free to post an image!</p>
          <form
            // onSubmit={'return Validate(this);'}
            className="upload-form"
          >
            <div className="panel">
              <div className="button_outer">
                <div className="btn_upload">
                  <input
                    filename={file}
                    onChange={(e) => onAddImage(e.target.files[0])}
                    type="file"
                    accept="image/*"
                    id="image-selection-btn"
                  ></input>
                  Choose your Art
                </div>
              </div>
            </div>
            <button type="submit" id="post-upload-btn">
              Upload Image
            </button>
          </form>
        </div>
      </div>
    </div>
  );
}

Working sandbox:

https://codesandbox.io/s/flamboyant-murdock-306b17?file=/src/App.js