Load image from GFS

Hello guys

I use superagent and I do like it. But despite the fact I spend the last days on the documentation, I am facing a problem that I do not succeed to resolve

I make a request to load an image inside react-dropzone Here is my request inside a react component

  loadImage(){
request.get('https://localhost:3000/' + 'api' +'/banner'+ this.props.path )
    .set({'Authorization': 'Bearer ' + Auth.getToken()})
      .then((res, err) => {
        if (err) {
          console.log(err)
        }
        console.log(res.status)
        if (res) {
          //  this.state.universities=

          console.log(res)

          var buf2 = new Buffer( res.text).toString('base64');
          console.log(buf2)
         var img = new Image();
          img.src = "data:image/png;base64," +  buf2 ;
          img.class='content';
          this.state.file=img
        }
  })}

I do a post when I drop a file and I succeed, but I do not understand how to get the image from my API. I did spend a lot of time taking my hairs out of my head.

Here is my rest API

router.get('/banner/admin/university/:id', (req, res) => {
//TODO improve it
console.log('--------------get the banner --------------')

  University.findById(req.params.id, function (err, uni) {

    var readstream = gfs.createReadStream({_id: uni.banner});

    readstream.on("error", function(err){
      console.log(err)
      res.send("No image found with that title");
    });
    readstream.pipe(res);
  })



})

Is there something I am missing ?

I get the data inside the res.text, but it is not readable. How can I put it as a file ? If you consider this not as an issue but as a newbie question, where can I get the right help about it ?

Best regards,

Arn

[arn-the-long-beard]

Okay I solved everything. ( I wanted to do more complicated than necessary … )

here is the explanation Serverside :

University.findById(req.params.id, function (err, uni) {
    if (err) {
      return res.status(409).json({
        success: false,
        message: 'error on getting the university'
      })
    }
    gfs.findOne({ _id: uni.banner}, function (err, file) {
      console.log(file)
      if (err) {
      }
      if (file) {
        const readstream = gfs.createReadStream({
          _id: uni.banner
        })

        const bufs = []
        readstream.on('data', function (chunk) {
          bufs.push(chunk)
        })
        readstream.on('error', function (err) {
          console.log(err)
          res.send('No image found with that title')
        })



        readstream.on('close', function () {
          /*
          const fbuf = Buffer.concat(bufs)
          const base64 = fbuf.toString('base64')
*/
          const fbuf = Buffer.concat(bufs)

          var img = new Buffer(fbuf, 'base64');

          res.writeHead(200, {
            'Content-Type': 'image/png',
            'Content-Length': img.length
          });
          res.end(img);

        })
        
      }
    })

Client side

```javascript
     file.url = 'https://localhost:3000/public' + this.props.location.pathname+'/banner'

I didnt need to use superagent to request the image. Just an Url. I do not know why I didnt think about this before.

Thank for helping me a lot with the header thing !

[arn-the-long-beard]

Haa thank you.

it is working !! 👍