CODEWITHSUNDEEP
angularjsnode.jsexpressopenshift
Justin
Justin

Reputation: 1329

Caching issue serving images from OPENSHIFT_DATA_DIR

I'm using the OPENSHIFT_DATA_DIR to store user-uploaded images because this directory is not re-written on deployment. I've got a symlink set up for referencing the directory in the markup:

app.use('/media', express.static(process.env.OPENSHIFT_DATA_DIR + '/media/'))

Then I can use that in the markup like so:

<img src="media/images/xyz.jpg" />

This works great locally, however, when I deploy I get a 404 on those images until I clear the browser cache. I doubt this has anything to do with it, but in case it helps, I'm using Angular on the front end, and those image paths are more like this:

<img src="media/images/{{user.profileImage}}" />

I know very little about server admin, and any help/thoughts/whatever is much appreciated.

Upvotes: 2

Views: 220

Answers (2)

Justin
Justin

Reputation: 1329

@coreydaley pointed me in the right direction, but I wanted to post my complete solution as an answer for anyone who happens upon this.

My issue was indeed due to the fact that my app scales across gears and those gears don't share a common file system, even in the OPENSHIFT_DATA_DIR. In researching I found cloudinary. The Node API is super easy to use and they offer tons of storage on their free plan. Not to mention the image manipulation tools, which so far seem to be rockin.

I am doing uploads like so:

cloudinary.uploader.upload(req.files.file.path, function (result)
{
    if (result)
    {
        var thumbUrl = cloudinary.url(result.public_id + '.' + result.format, { width: 100, height: 100, crop: 'fill' });

        res.json({
            success: 1, 
            successMessage: 'Successfully uploaded file: ' + req.files.file.originalname, 
            fileName: req.files.file.name, 
            photoUrl: result.url, 
            thumbUrl: thumbUrl 
        });
    }
// Using the original filename as cloudinary's public_id
}, { use_filename: true});

And listing my uploaded resources on the client side like so:

cloudinary.api.resources(function (result)
{ 
    if (result)
    {
        var files = [];

        async.each(result.resources, function (file, next)
        {
            var thumbUrl = cloudinary.url(file.public_id + '.' + file.format, { width: 100, height: 100, crop: 'fill' });
            files.push(thumbUrl);
            next();
        }, function (err)
        {
            if (err) console.log(err);
            res.json({ success: 1, files: files });
        });
    }
});

Upvotes: 3

user2879327
user2879327

Reputation:

users who visit your website do not have direct access to your OPENSHIFT_DATA_DIR, as it is outside of your web directory. You may need to create a symlink into your web directory for your OPENSHIFT_DATA_DIR/media folder for it to work. Also, if you are using a scaled application the file system is not shared between gears. if you could point us at the actual application url that has a sample of the issue, it would help.

Upvotes: 1

Related Questions