CODEWITHSUNDEEP
node.jshttp-status-code-404sails.jsassetsimage-uploading
Hristo Enev
Hristo Enev

Reputation: 2541

Access uploaded image in Sails.js backend project

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

Upvotes: 5

Views: 1822

Answers (1)

galactocalypse
galactocalypse

Reputation: 1935

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.

Upvotes: 5

Related Questions