angular fullstack generator can not send iamge stored in mongodb

Question

What a want to achieve is simple. I am using angular fullstack generator to produce the skeleton. User should be able to upload a profile picture along with their name, email etc. I am using angular-file-uplpoad to send the multipart form request. And according to its wiki, I also used code below.

// Requires multiparty 
multiparty = require('connect-multiparty'),
multipartyMiddleware = multiparty(),

// Requires controller
UserController = require('./controllers/UserController');

// Example endpoint 
router.post('/api/user/uploads', multipartyMiddleware, UserController.uploadFile);

I am also using gridfs-stream to stream the profile image into mongo gridfs. Everything seems fine here. Because if I stream the profile image into server local file, I can actually open and view the image. The problem is that, now I want to send the image back to the browser. I wrote code below

var Grid = require('gridfs-stream');
var GridFS = Grid(mongoose.connection.db, mongoose.mongo);
var fs = require('fs');

/*
  var UserSchema = new Schema({
  first_name: String,
  last_name: String,
  email: { type: String, lowercase: true },
  role: {
    type: String,
    default: 'user'
  },
  hashedPassword: String,
  provider: String,
  salt: String,
  phone: String,
  projects: [{
    type : Schema.Types.ObjectId,
    ref : 'Project'
  }],
  profile_picture: Schema.Types.ObjectId
});
*/

// each user has a _id for a image file in mongodb
getFile : function() {
   
   var readstream = GridFS.createReadStream({
        _id : this.profile_picture,
   });
   response.writeHead(200, {'Content-Type': 'iamge/png' });
   readstream.pipe(response);
    
  },

But this does not work. To test it. I even use fs.createReadStream(filename) to load a static image stored in the server side. The image is actually sent but the it's a broken image received in the browser. I also tried response.download('filename'); still does not work. Any suggestions?

Thanks!

Answer 1

You wrote: {'Content-Type': 'iamge/png' } Fix it to: {'Content-Type': 'image/png' }

Let me know if that solves it because I am also having problems and have similar code.