title: Image returned from REST API always displays broken
body: <p>I am building a content management system for an art portfolio app, with React. The client will POST to the API which uses Mongoose to insert into a MongoDB. The API then queries the DB for the newly inserted image, and returns it to the client. </p>
  
  <p>Here's my code to connect to MongoDB using Mongoose:</p>
  
  <pre><code>mongoose.connect('mongodb://localhost/test').then(() =&gt; 
  console.log('connected to db')).catch(err =&gt; console.log(err))
  
  mongoose.Promise = global.Promise
  
  const db = mongoose.connection
  
  db.on('error', console.error.bind(console, 'MongoDB connection error:'))
  
  const Schema = mongoose.Schema;
  
  const ImgSchema = new Schema({
    img: { data: Buffer, contentType: String }
  })
  
  const Img = mongoose.model('Img', ImgSchema)
  </code></pre>
  
  <p>I am using multer and fs to handle the image file. My POST endpoint looks like this:</p>
  
  <pre><code>router.post('/', upload.single('image'), (req, res) =&gt; {
    if (!req.file) {
      res.send('no file')
    } else {
      const imgItem = new Img()
      imgItem.img.data = fs.readFileSync(req.file.path)
      imgItem.contentType = 'image/png'
      imgItem
        .save()
        .then(data =&gt; 
          Img.findById(data, (err, findImg) =&gt; {
            console.log(findImg.img)
            fs.writeFileSync('api/uploads/image.png', findImg.img.data)
            res.sendFile(__dirname + '/uploads/image.png')
          }))
    } 
  })
  </code></pre>
  
  <p>I can see in the file structure that writeFileSync is writing the image to the disk. res.sendFile grabs it and sends it down to the client.</p>
  
  <p>Client side code looks like this:</p>
  
  <pre><code>handleSubmit = e =&gt; {
      e.preventDefault()
      const img = new FormData()
      img.append('image', this.state.file, this.state.file.name)
      axios
        .post('http://localhost:8000/api/gallery', img, {
          onUploadProgress: progressEvent =&gt; {
            console.log(progressEvent.loaded / progressEvent.total)
          }
        })
        .then(res =&gt; {
          console.log('responsed')
          console.log(res)
          const returnedFile = new File([res.data], 'image.png', { type: 'image/png' })
          const reader = new FileReader()
          reader.onloadend = () =&gt; {
            this.setState({ returnedFile, returned: reader.result })
          }
          reader.readAsDataURL(returnedFile)
        })
        .catch(err =&gt; console.log(err))
    }
  </code></pre>
  
  <p>This does successfully place both the returned file and the img data url on state. However, in my application, the image always displays broken.</p>
  
  <p>Here's some screenshots:</p>
  
  <p><a href="https://i.stack.imgur.com/CzPWA.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/CzPWA.png" alt="correct file is written to disk on server"></a></p>
  
  <p><a href="https://i.stack.imgur.com/86pXn.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/86pXn.png" alt="file is returned from API and placed on application state"></a></p>
  
  <p><a href="https://i.stack.imgur.com/3qaRB.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/3qaRB.png" alt="returned image is always broken, no matter what image I upload"></a></p>
  
  <p>How to fix this?</p>