CODEWITHSUNDEEP
javascriptjquerynode.jsexpress
Nonyck
Nonyck

Reputation: 682

nodejs expressjs upload images and display them

I have the following code

app.js

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');

OK then I have this route

app.post('/addPhoto', products.addPhoto);

This form

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')

I used thumbnail_img in a desperate intent to modify the path

now in products.js

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');
 };

Problem is when I use the template for show the products the src attribute shows like this src="./static/files/name-fo-the-pics" so how I do for display the images I uploaded

Upvotes: 4

Views: 7336

Answers (1)

log N
log N

Reputation: 945

What you can do in this case is that you got the target path of the stored file and get it save into database.

Use this method for uploading

app.post('/upload', function(req, res) {

    // get the temporary location of the file
    var tmp_path = req.files.thumbnail.path;
    // set where the file should actually exists - in this case it is in the "images" directory
   target_path = '/tmp/' + req.files.thumbnail.name;
    // move the file from the temporary location to the intended location
    fs.rename(tmp_path, target_path, function(err) {
        if (err) throw err;
        // delete the temporary file, so that the explicitly set temporary upload dir does not get filled with unwanted files
        fs.unlink(tmp_path, function() {
            if (err) throw err;

        });
    });
});

While retriving show that path in this method

fs.readFile(target_path, "binary", function(error, file) {
    if(error) {
      res.writeHead(500, {"Content-Type": "text/plain"});
      res.write(error + "\n");
      res.end();
    } else {

      res.writeHead(200, {"Content-Type": "image/png"});
      res.write(file, "binary");

    }

It should work then.

Upvotes: 6

Related Questions