title: Image Upload from React to Express server with Multer
body: <p>I get <code>undefined</code> when I try to read the <code>req.files</code> and if I read <code>req.body</code> I get <code>file: [object Object]</code> which, when read on the front end before being sent is</p>
  
  <p><code>Icon: File(4076381)
  lastModified: 1513292207750
  lastModifiedDate: Thu Dec 14 2017 17:56:47 GMT-0500 (EST) {}
  name: "image.jpeg"
  size: 4076381
  type: "image/jpeg"
  webkitRelativePath: ""</code></p>
  
  <p>but after </p>
  
  <pre><code>let upload =  new FormData();
  upload.append('file', user);
  console.log(upload);
  </code></pre>
  
  <p>upload logs <code>FormData = {}</code> so I have no idea why <code>.append()</code> did not work. <code>user</code> is the Icon object shown above.</p>
  
  <p>but when sent back it is the same <code>[object Object]</code> as on the server of course.</p>
  
  <p>I am trying to understand why req.file is not readable or any other alternative for how to read the uploaded file so that I can then do whatever I want with it (end game, store in a db as a field in mongodb, then pull out and render on the client side after logging in).</p>
  
  <p>Relevant code</p>
  
  <p>Register.js</p>
  
  <pre><code>  // standard React stuff
  
    handleUpload = (e) =&gt; {
      console.log(e.target.files[0]);
      this.setState({ Icon: e.target.files[0] });
    };
  
  
    handleSubmit = async (e) =&gt; {
      e.preventDefault();
      const dispatchObject = {
        Icon: this.state.Icon
      }
      await this.dispatchSubmit(dispatchObject);
    }
  
  render(){
    return (
      &lt;form noValidate autoComplete="off" onSubmit={this.handleSubmit}&gt;
        /&gt;
        &lt;Input
          id='Icon'
          type='file'
          name='Icon'
          accept='image/png, image/jpeg'
          onChange={this.handleUpload}
        /&gt;  
            &lt;input type='submit' value='Submit'/&gt;
      &lt;/form&gt;
    )
  }
  </code></pre>
  
  <p>action/index.js</p>
  
  <pre><code>export const register = (user, history) =&gt; {
    console.log(user);
    let upload =  new FormData();
    upload.append('file', user);
    return dispatch =&gt; {
      axios.post('http://localhost:9000/register', upload)
      .then((res) =&gt; {
        console.log(res.data);
        console.log('User successfully created');
      })
      .catch(err =&gt; console.log(err) );
    }
  }
  </code></pre>
  
  <p>server.js</p>
  
  <pre><code>import multer from 'multer';
  
  const storage = multer.diskStorage({
    destination: './files',
    filename(req, file, cb) {
      console.log(file);
      cb(null, `${new Date()}-${file.originalname}`);
    },
  });
  
  const upload = multer({ storage });
  
  app.post('/register', upload.single('file'), async (req, res) =&gt; {
    console.log(req.body.file);
    res.json(req.body.file);
  });
  </code></pre>
  
  <p>Multer will create the relevant folder called ./file but there is never anything in it and req.file is not accessible. I cannnot send it through the body in a standard manner because it comes out in the <code>[object Object]</code> format.</p>