title: nodejs expressjs upload images and display them
body: <p>I have the following code</p>
  
  <p>app.js</p>
  
  <pre><code>var express = require('express'),
    fs = require('fs'),
    format = require('util').format;
  
  var app = express();
  
  app.configure(function() {
    app.use(express.bodyParser());
    app.use(express.bodyParser({uploadDir:'./static/files/'}))
    app.use(express.methodOverride());
    app.use(express.static(__dirname + '/static'));
    app.use(express.errorHandler({
      dumpException: true,
      showStack: true
    }));
  });
  app.set('views',__dirname + '/views');
  app.set('view engine', 'jade');
  </code></pre>
  
  <p>OK then I have this route</p>
  
  <pre><code>app.post('/addPhoto', products.addPhoto);
  </code></pre>
  
  <p>This form</p>
  
  <pre><code>form(action='/new', method='POST', enctype="multipart/form-data")
   input(type='text', name="name", placeholder='nanme')
   input(type='text', name="description",placeholder='description')
   input(type='text', name="thumbnail_img",placeholder='path')
   input(type='number', name='price', placeholder='123')
   input(type="file", name="thumbnail")    
   input(type='submit') 
  </code></pre>
  
  <p>I used thumbnail_img in a desperate intent to modify the path</p>
  
  <p>now in products.js</p>
  
  <pre><code>var products = exports.products = [];
  
  var format = require('util').format;
  var  fs = require('fs');
  
  products.push(
    {  id:0,
       name:'name 1',
       description:'description1',
       thumbnail_img: '',
       price: 100 },
    {  id:1,
       name: 'name_2',
       description: 'description2',
       thumbnail_img: '',
       price: 150
    }
  );
  
   exports.addPhoto = function(req,res){
    var body = req.body;
    var tmp_path = req.files.thumbnail.path;
    var target_path = './static/files/' + req.files.thumbnail.name;
  
    fs.rename(tmp_path, target_path, function(err) {
      if (err) throw err;
      fs.unlink(tmp_path, function() {
      body.thumbnail_img =  target_path;
        if (err) throw err;
      });
    });
  
    var body = req.body;
  
   // Fun here is I got a path starting with a .
   // so this code is for remove the .    
  
    var n = target_path.toString()
    var n2 = n.replace('.','');
    body.thumbnail_img =  n2;
  
  
    products.push(req.body);
    res.redirect('/products');
   };
  </code></pre>
  
  <p>Problem is when I use the template for show the products the src attribute shows like this <code>src="./static/files/name-fo-the-pics"</code> so how I do for display the images I uploaded</p>