title: Upload Image Request from React
body: <p>What I am trying to achieve is to send a request from the Client Side (React) to the Server Side (Express) containing the uploaded image file</p>
  
  <p>Here an example of a form I created on the Server which sends the data I should be sending with React instead:</p>
  
  <pre><code>&lt;form method="post" action="post" enctype="multipart/form-data"&gt;
    &lt;input type="file" name="image" /&gt;&lt;br /&gt;&lt;br /&gt;
    &lt;button type="submit" name="upload"&gt;Upload&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>This is the object sent by the submitted form when uploaded an image: <a href="https://i.stack.imgur.com/Ph9sp.png" rel="nofollow noreferrer">link</a></p>
  
  <p>Here the React Component:</p>
  
  <pre><code>const Component = () =&gt; {
    const setImageAction = async (event) =&gt; {
      event.preventDefault();
  
      const data = await fetch("http://localhost:3000/upload/post", {
        method: "post",
        headers: { "Content-Type": "multipart/form-data" },
        body: JSON.stringify({
  
        }),
      });
      const uploadedImage = await data.json();
      if (uploadedImage) {
        console.log('Successfully uploaded image');
      } else {
        console.log('Error Found');
      }
    };
  
    return (
      &lt;div className="content"&gt;
        &lt;form onSubmit={setImageAction}&gt;
          &lt;input type="file" name="image" /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;button type="submit" name="upload"&gt;
            Upload
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>As you can see, in the React Component the body request is empty as I haven't figured out how to retrieve that file object..</p>
  
  <p>Thank you in advance for your help!</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>Updated as shown, with the only difference of keeping State as Hook</p>
  
  <p>Here the new React Component Code:</p>
  
  <pre><code>const LandingPage = () =&gt; {
    const [picture, setPicture] = useState({});
  
    const uploadPicture = (e) =&gt; {
      setPicture({
        /* contains the preview, if you want to show the picture to the user
             you can access it with this.state.currentPicture
         */
        picturePreview: URL.createObjectURL(e.target.files[0]),
        /* this contains the file we want to send */
        pictureAsFile: e.target.files[0],
      });
    };
  
    const setImageAction = async (event) =&gt; {
      event.preventDefault();
  
      const formData = new FormData();
      formData.append("file", picture.pictureAsFile);
  
      console.log(picture.pictureAsFile);
  
      for (var key of formData.entries()) {
        console.log(key[0] + ", " + key[1]);
      }
  
      const data = await fetch("http://localhost:3000/upload/post", {
        method: "post",
        headers: { "Content-Type": "multipart/form-data" },
        body: formData,
      });
      const uploadedImage = await data.json();
      if (uploadedImage) {
        console.log("Successfully uploaded image");
      } else {
        console.log("Error Found");
      }
    };
  
    return (
      &lt;div className="content landing"&gt;
        &lt;form onSubmit={setImageAction}&gt;
          &lt;input type="file" name="image" onChange={uploadPicture} /&gt;
          &lt;br /&gt;
          &lt;br /&gt;
          &lt;button type="submit" name="upload"&gt;
            Upload
          &lt;/button&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    );
  };
  </code></pre>
  
  <p>And here what I get from those console.logs: <a href="https://i.stack.imgur.com/2xXrm.png" rel="nofollow noreferrer">link</a></p>
  
  <p>I created a snippet in codesandbox if you want to have a look at: <a href="https://codesandbox.io/s/heuristic-snyder-d67sn?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/heuristic-snyder-d67sn?file=/src/App.js</a></p>