Uploading images from a form is a common requirement in modern web apps—profiles, products, blogs, reports, and more. Many developers struggle with handling files correctly in React and sending them to the server.

In this guide, you’ll learn the correct, production-ready way to upload images using React forms and Axios.

import { useState } from "react";

export default function ImageUploadForm() {
  const [image, setImage] = useState(null);

  const handleFileChange = (e) => {
    setImage(e.target.files[0]);
  };

  return (
    <form>
      <input type="file" accept="image/*" onChange={handleFileChange} />
    </form>
  );
}

All the async tasks are inside the inner loadAsyncStuff() function. This function is called immediately after declaration and saves information about its progress with state properties like loaded and error. If all async tasks succeed, the resulting data is saved to data; otherwise, the error is caught and saved to error. In both cases, loaded is set to true when the async task finishes. Wrapping the logic inside useEffect() ensures it only runs once.

Such a React hook handles async code easily and provides all the necessary information to its user about the current state of the process. This way, the component can exactly reflect what’s going on.

Bonus — Sending Other Fields with Image