Can't upload images on Heroku server

Question

Got some problem with uploading images to heroku server, on localhost everything work great. But on heroku when I upload image, it looks that all goes well but after refreshing the page I got a error message 404 (Not Found) so it seems that it doesn't uploaded.

Here is my code

var express = require('express'),
    app = express(),
    server = app.listen(process.env.PORT || 5000),
    fs = require('fs-extra'),
    im = require('imagemagick'),
    util = require('util'),
    formidable = require('formidable');

app.post('/upload', function (req, res){
  var form = new formidable.IncomingForm();

  // show respond
  form.parse(req, function(err, fields, files) {
    res.writeHead(200, {'content-type': 'text/plain'});
    res.write('received upload:\n\n');
    console.log(fields + ' ' + files);
    res.end(util.inspect({fields: fields, files: files}));
  });

  form.on('end', function(fields, files) {
    var that = this;
    // temporary storage of image
    var temp_path = that.openedFiles[0].path;
    // uploaded image name
    var file_name = that.openedFiles[0].name;
    var dirpath = __dirname + '/app';
    var opt = {
      thumb : {
        width: 150,
        height: 150,
        dest: '/uploads/thumbnails/'
      },
      original : {
        dest : '/uploads/original/'
      }
    };

    // get extension of image
    var extension;
    (function(type) {
      if (type == 'image/jpeg' || type == 'image/jpg') {
        extension = '.jpg';
      } else if (type == 'image/png') {
        extension = '.png';
      }
    })(that.openedFiles[0].type);

    fs.copy(temp_path, dirpath + opt.original.dest + id + extension, function(err) {
      if (err) {
        console.error(err);
      } else {
        // thumbnails
        im.crop({
          srcPath: dirpath + opt.original.dest + id + extension,
          dstPath: dirpath + opt.thumb.dest + id + extension,
          width: opt.thumb.width,
          height: opt.thumb.height,
          quality: 1,
          gravity: 'Center'
        }, function (err, stdout, stderr){
          if (err) {console.log('Thumbnail is not generated')}
            else {
            }
        });
      }
    });
  });
});

Where could be a problem?

Answer 1

In a cloud environment you should never upload images to the instance itself. Always use a central storage like for example S3 to store your uploaded files.

When you develop in a cloud environment you should always keep in mind that the current box you are running your code will only live for a certain amount of time (minutes, hours). So if the instances goes down you'll lose all your uploaded files.

Another problem can occur when you for example have 2 instances and your user uploads an image to instace x. Now when a second user tries to view the image but the load balancer will sent the request to instance y the image is not found because it doesn't exist on that instance.

For debugging your script I would add some more logging. Then in Heroku you could use :

heroku logs -t -a appname

to watch the logs of your application.