title: Image streamed from Mongo's Gridfs not displayed in browser
body: <p>I am posting this issue here, I have been reading many related posts, but any of them helped me in making it work.</p>
  
  <p>The idea is pretty easy: I have a MEAN-based application in which is possible to upload an image to GridFS - WITHOUT storing it locally to the server - and later to visualize it in the browser. </p>
  
  <p>So let's start. I am uploading an image from AngularJS by using the <strong>angular-file-upload</strong> module. Therefore, in one of my AngularJS controller I have:</p>
  
  <pre><code>$scope.onFileSelect = function(file) {
  
     var fileName = file.name;
  
     $scope.upload = $upload.upload({
         url: '/file/uploadFile', //this is the node route for uploading the file
         headers: {
              'fileName':fileName
         },
         file: file
     }).
     success(function(data, status, headers, config) {
      //DOING STUFF
     }.
     error(function(data, status, headers, config) {
      //DOING OTHER STUFF
     });
  }
  </code></pre>
  
  <p>In my Node + Express server, I am handling the request to upload and the request to download the image by means of the <strong>grids-stream</strong> module. This allows me to stream and save the image directly in/from GridFS without the need to save it in the server temporarily. </p>
  
  <pre><code>var mongoose = require('mongoose'),Grid = require('gridfs-stream'),gfs;
  
  mongoose.connection.once('open',function() {
      gfs = Grid(mongoose.connection.db, mongoose.mongo);
  });
  
  exports.uploadFile = function(req, res) {
     var fileNameHeader = req.headers['filename'];
     //creating a unique filename
     var name = uuid.v1();
     var extIndex = fileNameHeader.lastIndexOf('.');
     var extension = fileNameHeader.substr(extIndex);
     var fileName = name+extension;
  
     var writeStream  = gfs.createWriteStream({
         filename: fileName,
         root: 'imagesGrid'
     });
     req.pipe(writeStream);
     writeStream.on('close',function() {
        //DOING STUFF 
     });
  }
  
  exports.downloadFile = function(req,res) {  
     var name = req.params.name;
     var readStream = gfs.createReadStream({
        filename: name,
        root: 'imagesGrid'
     });
     res.header({'Content-type': mime.lookup(name)});
     readStream.pipe(res);
  };
  </code></pre>
  
  <p>On the client side, I have this HTML directive that generates all HTML image elements:</p>
  
  <pre><code>&lt;my-image-draggable ng-repeat="image in userImages"&gt;
  &lt;/my-image-draggable&gt; 
  </code></pre>
  
  <p>where <strong>my-image-draggable</strong> has, as one of its elements: </p>
  
  <pre><code>&lt;img ng-src='{{image.imageId.location}}'&gt;
  </code></pre>
  
  <p>At runtime, <code>{{image.imageId.location}}</code>, is translated to (for instance): <code>'/file/getFile/2350bcf0-53b4-11e4-9f6b-9fc9a66908c4.jpg'</code>, thus, in principle </p>
  
  <pre><code>&lt;img ng-src='/file/getFile/2350bcf0-53b4-11e4-9f6b-9fc9a66908c4.jpg'&gt;
  </code></pre>
  
  <p>should fire a HTTP GET request to <code>downloadFile</code> in the server, the image should be streamed from GridFS, and finally displayed in the browser. The problem is that the image is not displayed.</p>
  
  <p>I have also tried to pre-process, in the Angular controller, the image data sent by the server in order to encode it to base64 and let at runtime <code>ng-src</code> be something like: </p>
  
  <pre><code>'data:image/jpeg;base64,'+Base64.encode(data);  
  </code></pre>
  
  <p>but it does not work neither.</p>
  
  <p>I have also tried to call the <code>downloadFile</code> route manually and it gives no result. I cannot figure it out why this is not working. I am wondering whether the image is correctly saved to GridFS. </p>
  
  <p>Any suggestion? 
  Anyone else who experienced the same issue?</p>
  
  <p>Thanks a lot!</p>