Show image immediately after upload in sailsjs

Question

I have form with upload field. After searching for a while, I just put uploaded files to folder ./assets/posts and it worked correctly.

In my app, when submit done, it should be reload current url and show new uploaded image. But it didn't. My sails app use linker to manage assets. So after 3 or 4 times I try to reload the page, image is showed.

How to show image immediately when I submit done? Thanks a lot!

Answer 1

Sails uses assets folder to store mainly the assets that are supposed to be precompiled and/or published, e.g. scripts, styles and minor images (icons, etc.). For images it means in most of the cases that upon sails lift they are being copied (including directory structure and symlinks) from ./assets folder to ./.tmp/public, which becomes publicly accessible.

So, the short answer to the question is: in order to become immediately accessible the images should be copied to ./.tmp/public/posts (not to ./assets/posts).

On the other hand, ./.tmp folder is being rewritten during sails lift, and you probably don't want your uploaded images to disappear whenever the application restarts, so it makes sense to upload the images in a completely different folder, let's say ./attachments/posts or whatnot, which in its turn needs to be symlinked from ./.tmp/public/images/posts after the Sails are lifted. For example, in your config/bootstrap.js you can put something like

var fs = require('fs')
  , path = require('path');

module.exports.bootstrap = function (cb) {
  // Whatever else you want to bootstrap...

  var postsSource = path.join(process.cwd(), 'attachments/posts')
    , postsDest = path.join(process.cwd(), '.tmp/public/images/posts');

  fs.symlink(postsSource, postsDest, function(err) {
    cb(err);
  });
};

You can use synchronous version of fs.symlink or async to create multiple links.

Update for windows guys

var sys = require('sys');
var exec = require('child_process').exec;
exec('mklink /j '+postsDest+' '+postsSource , function(err, stdout, stderr){
    cb(err);
});

And, of course, even better way would be uploading the images directly to a CDN/storage service (Amazon S3, etc.) and just generating corresponding URLs to access them.

Answer 2

An alternative, which is OS agnostic, is to change the grunt-clean task (in /tasks/config/clean.js) to specify which folders to clean in your .tmp/public. See example below. In my case, I created a folder "uploads" in .tmp/public, and it does not get deleted.

grunt.config.set('clean', {
    dev: ['.tmp/public/fonts/**','.tmp/public/images/**','.tmp/public/js/**','.tmp/public/js/**','.tmp/public/styles/**','.tmp/public/*.*'],
    build: ['www']
});