picture do not show in sails.js view

Question

My assets folder :

assets  
     | images  
            | media  
                  | book  
                        | pictures  

i want to create new book when i upload book picture in above path, But when i try to show this image in view, the image can not be displayed and there is no error either.
my code is:

//BookController
create: function (request, response, next) {
var title = request.body.title;
var subject = request.body.subject;
var brief = request.body.brief;
var author = request.body.author;
var origin_pic_name = null;

request.file('pic').upload({
  dirname: '../../assets/images/media/book/pictures/',
},function (err, file) {
  if(err) console.log(err);
  origin_pic_name = file[0]['fd'].split('\\').reverse()[0] ;

  Book.create({title:title,subject:subject,brief:brief,author:author,pic:origin_pic_name}).exec(function (err) {
    if(err) response.end(500, {error: 'Database Error'});
    response.redirect('/');
  });

});},  

index : function (request, response, next) {
Book.find({}).exec(function (err, books) {
  if(err) response.end(500, {error: 'Database Error'});
  response.view('book/index', {books:books});
});},  

//my index.ejs
<ol>
<% books.forEach(function (value) {%>
  <h3><li> <%= value.title %></li></h3>
  <ul><%= value.author %></ul>
  <ul><%= value.subject %></ul>
  <ul><%= value.brief %></ul>
  <ul><img src="/images/media/book/pictures/<%= value.pic %>"/></ul>
<% })%>
</ol>

thank you

Answer 1

You need to be very careful when uploading images to Sails:

The Problem

Grunt is watching for changes in some folders, including the assets dir and subdirs. But that is only possible (activacted, tbh) in "Development" enviroment.

The solution

• Create a images/ dir in your root.
• When uploading the image, make skipper save the image there.

• Write a mediaController that will catch routes like /images/media/book/:name and will try to locate and send a file:

  // MediaController.js
  var fs = require('fs');
  var path = require('path');
  
  module.exports = {
      get : function(req, res){
          var filepath = req.name.slice(1,req.name.length);
  
          // remove this Sync to an Async 
          if(fs.existsSync(path.resolve(filepath))){
              return res.sendfile(filepath);
          } else {
              return res.notFound();  
          }
      }
  }
  
  //Routes.js
  'get /images/books/:name' : 'MediaController.get'
  

Advantages

• You can now restrict the access of images with policies, if you want to!
• Better handling at image and 100% control over the fs. Good with DO Spaces, for example...

Answer 2

Out of the box, sails caches assets during the sails lift process. To get around this, for file uploads, you can alter your controller to copy the file immediately after upload.

Here is an example of how you might do that with your current controller. You may need to edit the directory strings to suit your needs.

// BookController
create: function (request, response, next) {
    var title = request.body.title;
    var subject = request.body.subject;
    var brief = request.body.brief;
    var author = request.body.author;
    var origin_pic_name = null;

    request.file('pic').upload({
        dirname: '../../assets/images/media/book/pictures/',
    },function (err, file) {
        if(err) console.log(err);

        origin_pic_name = file[0]['fd'].split('\\').reverse()[0];

        // Variable to hold the current directory
        var currentDir = '../../assets/images/media/book/pictures/' + origin_pic_name;

        // Variable to hold the temp directory
        var tempDir = '.tmp/public/images/media/book/pictures/' + origin_pic_name;

        // copy the image from the current directory to the temp to the temp folder
        fs.createReadStream(currentDir).pipe(fs.createWriteStream(tempDir));

        Book.create({title:title,subject:subject,brief:brief,author:author,pic:origin_pic_name}).exec(function (err) {
            if(err) response.end(500, {error: 'Database Error'});
            response.redirect('/');
        });
    });
},