I can not see the image I just uploaded [sails.js] - image

Question

I have this to upload photos:
module.exports = function (req, image, url, callback) {
var filename = (Math.floor((Math.random() * 100000000000) + 1)) + ".png";
req.file(image).upload({
dirname: '../../assets/images' + url
,
saveAs: function(file, cb) {
cb(null, filename);
}
}, function(error, uploadedFiles) {
return callback(null, "http://" + req.headers.host + "/images" + url + filename)
});
}
And it returns an url like this: http://localhost:1349/images/dependent/photos/30363010266.png
I can see that my photo is uploaded in project folder because I see it physically. But the URL do not work and has appeared not found error.
If I restart server, the URL works fine.
Thanks!

Answer 1

As #Eugene Obrezkov pointed out, your issue is related to where you are uploading your images and the grunt task runner. All the assets are copied from that folder (/assets) to the .tmp, and changes are watched by the grunt task runner, but that doesn't include new image files(If you are to an empty folder in the assets folder, in your case to the image folder). So the solution is quite easy, you must upload directly to the .tmp folder, ideally to .tmp/public/uploads/year/month/, you can choose your path as you see fit. Now there is a caveat with this approach, and it is that there is a grunt task that clears the contents of the .tmp folder on sails lift, so you will get the opposite effect, now to avoid this is quite easy too, you must edit the clean.js task to delete specific folders, to avoid deleting your uploads folder.
Go to to your project folders tasks/config/clean.js, and replace what's in there for this code, or modify it as you need.
module.exports = function(grunt) {
grunt.config.set('clean', {
dev: [
getFolderPath('fonts/**'),
getFolderPath('images/**'),
getFolderPath('images/**'),
getFolderPath('js/**'),
getFolderPath('styles/**'),
getFolderPath('*.*')
],
build: ['www']
});
grunt.loadNpmTasks('grunt-contrib-clean');
};
function getFolderPath(folderName){
return '.tmp/public/' + folderName;
}
Now your uploads will appear immediately to your end-user without restart, and restarts won't delete those uploads. Just make sure the .tmp/public/uploads/ path exist before trying to upload, or use mkdir to create it via code if not found.
There are other solutions, like making sure there is at least a file in the folder you are uploading to when the server starts, or using symlinks, but i think this is a cleaner approach. You can check those options here:
Image not showing immediately after uploading in sails.js

Answer 2

If you take a look into tasks folder, you can find Grunt task that copies all the assets folder to .tmp folder and make .tmp folder as static public folder.
When you are running Sails application, it runs these Grunt tasks, so that if you uploading file direct to assets folder it will not be accessible until you re-run server and Grunt tasks.
Solution? There is no solution. Basically, you are doing it wrong. Best practices is to store images\files\whatever on S3 buckets, Google Storage, another hard drive at least, but not assets itself. Because it's your source files of your project and in there should be located only files needed for project itself, not user's files, etc...

Answer 3

You can achieve without modifing any grunt task. I had the same issue and I have just solved it.
I see you already have an explanation of what's happening in other comments, so I'll go straight to my solution. I uploaded the files to the .tmp folder, and on the callback of the upload, I coppied them to the assets folder using the file system (fs-extra is a great package for that).
So now I can see the images in my UI as soon as it's added (cause I uploaded them to .tmp) and when my server stops, .tmp will be lost, but generated again in the next lift with the files copied to assets.
Hope it helps!

Answer 4

This is how I solved this problem. The answer requires several steps. I am assuming you want to place your recently uploaded images in a folder called users.
Steps:
1. npm install express --save (If you don't have it installed)
Create a Users folder in your apps root directory.
Open the text editor and view the following file config\express.js
Add or replace with the code
`
var express = require('express');
module.exports.http = {
customMiddleware: function (app) {
app.use('/users', express.static(process.cwd() + '/users'));
}
};
`
5. Make certain the newly uploaded images are placed in the Users folder
Finish