ReactImgUpExample.js

import React, { useState, useRef } from 'react';
import axios from 'axios'

const ImgUpExample = ({mode,btnText,handleSubmit}) => {
	const imgUp = useRef(null);
	const [image, setImage] = useState();
  const [imageName, setImageName] = useState();
  
	function handleImage(e) {
		setImage(e.target.files[0]);
		setImageName(e.target.files[0].name);
	}

	function handleFormSubmit(event) {
		event.preventDefault();
		const data = new FormData();
		data.append('file', image);

		axios.post('/upload-image', data).then(res => {
				if (res.status === 200) {
				  alert('added');
			  }
		}).catch(err => {
				alert('Error occured.');
				console.log(err);
		})
	}

	return (
		<div>
      <form onSubmit={handleFormSubmit}>
        <input
					type="file"
					style={{ display: 'none' }}
					ref={imgUp}
					onChange={handleImage}
					accept="image/*"></input>
				<button onClick={e => imgUp.current.click()}>Select photo</button>
        <button type="submit">Upload Image</button>
      </form>
		</div>
	);
};

export default ImgUpExample;