Access uploaded image in Sails.js backend project

Question

I am trying to do an upload and then accessing the image. The upload is going well, uploading the image to assets/images, but when I try to access the image from the browser like http://localhost:1337/images/image-name.jpg it gives me 404. I use Sails.js only for backend purposes - for API and the project is created with --no-front-end option. My front end is on AngularJS.

My upload function:

avatarUpload: function(req, res) {
    req.file('avatar').upload({
        // don't allow the total upload size to exceed ~10MB
        maxBytes: 10000000,
        dirname: '../../assets/images'
    }, function whenDone(err, uploadedFiles) {
        console.log(uploadedFiles);
        if (err) {

            return res.negotiate(err);
        }

        // If no files were uploaded, respond with an error.
        if (uploadedFiles.length === 0) {

            return res.badRequest('No file was uploaded');
        }

        // Save the "fd" and the url where the avatar for a user can be accessed
        User
            .update(req.userId, {

                // Generate a unique URL where the avatar can be downloaded.
                avatarUrl: require('util').format('%s/user/avatar/%s', sails.getBaseUrl(), req.userId),

                // Grab the first file and use it's `fd` (file descriptor)
                avatarFd: uploadedFiles[0].fd
            })
            .exec(function (err){
                if (err) return res.negotiate(err);
                return res.ok();
            });
    });
}

I see the image in the assets/images folder - something like this - 54cd1fc5-89e8-477d-84e4-dd5fd048abc0.jpg

http://localhost:1337/assets/images/54cd1fc5-89e8-477d-84e4-dd5fd048abc0.jpg - gives 404

http://localhost:1337/images/54cd1fc5-89e8-477d-84e4-dd5fd048abc0.jpg - gives 404

score 5 · Accepted Answer · edited May 23 '17 at 12:32

5

This happens because the resources your application accesses are not accessed directly from the assets directory but the .tmp directory in the project root.

The assets are copied to the .tmp directory when sails is lifted, so anything added after the lift isn't present in .tmp.

What I usually do is upload to .tmp and copy the file to assets on completion. This way assets isn't polluted in case the upload fails for any reason.

Let us know if this works. Good luck!

Update Found a relevant link for this.

edited May 23 '17 at 12:32

Community

1
1

answered Jul 02 '15 at 15:19

galactocalypse

1,805
1
12
28

1

Thank you very much. I managed to do an upload and to access the picture following the tutorial you provided. It really helped me. Just one small thing to note - when copying the uploaded file from assets to `.tmp` folder, if the folder structure - `.tmp/public/images/uploads` there is not present, we need to create it first or `fs` error breaks the application if not caught. – Hristo Enev Jul 03 '15 at 08:13
1

Indeed! You can use the [mkdirp](https://www.npmjs.com/package/mkdirp) module or [fs-extra](https://www.npmjs.com/package/fs-extra) (for added functionality) to create a folder if it doesn't exist using a single command. Or just use this [well-reasoned solution](http://stackoverflow.com/a/21196961/1100528). – galactocalypse Jul 03 '15 at 08:34

Access uploaded image in Sails.js backend project

1 Answers1