Can't properly fetch GridFS image on Angular app - node.js

Question

I'm really a newbie with Angular, MongoDB, so I'm asking for your help !
I'm trying to display images on an Angular App
Images are saved using Gridfs and sent to the app with fs.createReadStream
//The model
const ProfilePic = mongoose.Schema(
{
_id : mongoose.Schema.Types.ObjectId,
lenght: Number,
chunksize: Number,
uploadDate: Date,
filename: String,
md5: String,
contentType: String
}
);
// Create storage engine
const storage = new GridFsStorage({
url: mongoURI,
file: (req, file) => {
return new Promise((resolve, reject) => {
const filename = file.originalname;
const fileInfo = {
filename: filename,
bucketName: "ProfilePic"
};
resolve(fileInfo);
});
}
});
const upload = multer({ storage });
router.post("/setProfilePic", upload.single("picture"), (req, res) => {
console.log("image received");
return res.status(200).json({err: "no"})
});
router.get('/getProfilePic/:filename', (req, res) => {
gfs.collection('ProfilePic'); //set collection name to lookup into
/** First check if file exists */
gfs.files.find({filename: req.params.filename}).toArray(function(err, files){
if(!files || files.length === 0){
return res.status(404).json({
responseCode: 1,
responseMessage: "error"
});
}
// create read stream
var readstream = gfs.createReadStream({
filename: files[0].filename,
root: "ProfilePic"
});
// set the proper content type
res.set('Content-Type', files[0].contentType)
// Return response
return readstream.pipe(res);
});
});
// method used to fetch the image
async getProfilePic(name) {
return this.http.get(this.url + "user/getProfilePic/" + name);
}
Here's the error I get on the application :
Unexpected token � in JSON at position 0
What is wrong with my code ?

Answer 1

The client/browser is trying to parse the response as json since that's the default. Just pass an object with a responseType attribute set to 'blob' and it should work.
// method used to fetch the image
async getProfilePic(name) {
return this.http.get(this.url + "user/getProfilePic/" + name, {responseType: 'blob'});
}
https://angular.io/api/common/http/HttpRequest#responseType