ExpressJS File Upload Stopped After NGINX Reverse Proxy Deployment

Question

I'm using Multer for file upload on my ExpressJS Application, all upload were working find until I deployed the application with nginx as reverse proxy. I can't seem to figure out what is wrong. I was also using Vimeo library for Vimeo uploads, which has also stopped.

Everything below still works perfectly on my local system and was working perfectly online until I started using a domain on NGINX instead of a NodeJS IP:PORT

I have also installed Lets Encrypt SSL during the same process, I'm not sure if that will cause trouble here.

The following is the my code for upload of Image to Filesystem & Video to Vimeo Server using Vimeo API.

var multer  = require('multer')
var upload = multer({ dest:'public/uploads/' })
var Vimeo = require('vimeo').Vimeo;
var lib = new Vimeo('somekey', 'someuser', 'somepass');


/* HANDLE IMAGE POST */
router.post('/profile', upload.single('picture'), function(req, res) {
  if(req.file){
    req.body.picture = req.file.filename;
  }
});


/* HANDLE VIDEO POST */
router.post('/video-vimeo', upload.single('vimeovideo'), function(req, res) {
  if(req.file){
    req.body.videourl = req.file.filename;
  }
  var vimeoUrl ='/public/uploads/'+req.file.filename;
  lib.streamingUpload(vimeoUrl,  function (error, body, status_code, headers) {
      if (error) { throw error; }
      lib.request(headers.location, function (error, body, status_code, headers) {
          var video = {};
          video._id = req.body._id;
          video.videourl = body.link;
          videoModel.findByIdAndUpdate(video._id, video, function(err, dish) {
            if (err) { console.log(err); }
            else{ res.redirect(req.get('referer')); }
          });
      });
  });
});

My nginx settings (/etc/nginx/sites-enabled):

server {
    listen 443 ssl http2 default_server;
    listen [::]:443 ssl http2 default_server;
    include snippets/ssl-example.com.conf;
    include snippets/ssl-params.conf;

    server_name example.com www.example.com;

    location / {
        proxy_pass http://localhost:8080;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
    }
}

NodeJS Server in Express (bin/www):

var app = require('../app');
var debug = require('debug')('example:server');
var http = require('http');

var port = normalizePort(process.env.PORT || '8080');
app.set('port', port);

var server = http.createServer(app);

server.listen(port, 'localhost');
server.on('error', onError);
server.on('listening', onListening);

I have found some article suggesting to add the following in my NGINX configuration (It didn't work for me):

location /public/uploads {
    limit_except POST          { deny all; }

    client_body_temp_path      /tmp/;
    client_body_in_file_only   on;
    client_body_buffer_size    128K;
    client_max_body_size       1000M;

    proxy_pass_request_headers on;
    proxy_set_header           X-FILE $request_body_file;
    proxy_set_body             off;
    proxy_redirect             off;
    proxy_pass                 http://localhost:8080/public/uploads;
}

Please let me know if this is a common problem? and what did I do wrong?

Answer 1

I recently ran into this problem, and spent a few days trying to figure it out.

When in production mode the uploads folder is in a different location than when in development mode, or on localhost.

Try running some console logs in both development and production to find out where your uploads folder is.

This is my code for multer.diskStorage

const storage = multer.diskStorage({
  destination(req, file, cb) {
    process.env.NODE_ENV === 'production'
      ? cb(null, '../uploads/')
      : cb(null, 'uploads/')
  },
  filename(req, file, cb) {
    cb(
      null,
      `${file.fieldname}-${Date.now()}${path.extname(file.originalname)}`
    )
  },
})