title: Uploading an image with multer / react-dropzone
body: <p>I cannot seem to upload an image to my uploads folder using express,multer and react-dropzone. My code is as follows:</p>
  
  <pre><code>&lt;Dropzone
      style={{position: "relative"}}
      accept="image/*, video/*"
      onDrop={this.onDrop.bind(this)}
      onDragEnter={this.onDragEnter.bind(this)}
      onDragLeave={this.onDragLeave.bind(this)}
      name='avatar'
    &gt;
      { dropzoneActive &amp;&amp; &lt;div style={overlayStyle}&gt;Drop files...&lt;/div&gt; }
      &lt;div&gt;
  
        &lt;h2&gt;Dropped files&lt;/h2&gt;
        {
  
            files.map(f =&gt; &lt;div&gt;&lt;li&gt;{f.name} - {f.size} bytes&lt;/li&gt; 
            &lt;img style={{height:'100px'}}src={f.preview}/&gt;&lt;/div&gt;)
        }
      &lt;/div&gt;
    &lt;/Dropzone&gt;
  </code></pre>
  
  <p>A basic file upload using the dropzone example. Then my submit function is:</p>
  
  <pre><code>createBlog(){
  
  var file = this.state.files[0];
  var file_name = file.name;
  //api/blog
  fetch('http://localhost:8080/saveBlog', {
  method: 'POST',
  headers: {
    "Accept": 'application/json',
    'Content-Type': 'application/json',
    //"Content-Type": "application/x-www-form-urlencoded"
  },
  body: JSON.stringify({
    file: file,
    file_name: file_name
  })
    }).then((response) =&gt;  {
    ...
    }))
    }, function(error) {
     console.log('error: ',error.message)
    })
  }
  </code></pre>
  
  <p><strong>Note</strong> that <strong>file</strong> returns all the properties that image has, E.G. lastModifiedDate, name, preview, size, type, webkitRelativePath.</p>
  
  <p>However, when I pass the data to the server the response I get is :</p>
  
  <pre><code>{ file:
   { preview: 'blob:http://localhost:3000/954e0002-3045-44c4-bcd8-70dc26d0d416' 
  },
  file_name: 'image.jpg' } 'Body'
  undefined 'files'
  </code></pre>
  
  <p>Where my server code involving the image is :</p>
  
  <pre><code>var multer = require('multer');
  var upload = multer({ dest: './uploads/' });
  ...
  ...
  router.post('/saveBlog', upload.single('avatar'), function(req, res, next) {
      console.log(req.body, 'Body');
      console.log(req.file, 'files');
      res.end();
  });
  </code></pre>
  
  <p>I am hoping someone can help tell me why my images are not going to my uploads folder as I have spent a long time trying to figure out this basic example.</p>