William Jiang

JavaScript,PHP,Node,Perl,LAMP Web Developer – http://williamjxj.com; https://github.com/williamjxj?tab=repositories

NodeJS & Express: upload image file and refresh ALL linked screen (3)

NodeJS & Express: upload image file and refresh ALL linked screen (1)

This is my an other application o NodeJS – Use NodeJS and Express web framework to implement a very cool effect:

  • in the webpage, there is a file upload form; user can upload image files from here.
  • when submit, the image is uploaded to server directory, and reflect to current webpage without page refresh.
  • meanwhile, all the web users could immediately see this uploaded image without refresh.
  • exact the same as Facebook’s ‘like’ feature.

It is different from previous example, which doesn’t use upload form, instead, it uses a simple form input field. The forms are different, so the implement are quite different also. The following is the core app.js:

var my_dir = __dirname+'/public/';
var express = require('express'),
    routes = require('./routes');
var app = module.exports = express.createServer();

  app.set('views', __dirname + '/views');
  app.set('view engine', 'jade');
  app.use(express.static(__dirname + '/public'));

app.configure('development', function(){
  app.use(express.errorHandler({ dumpExceptions: true, showStack: true }));

app.configure('production', function(){

// Routes
app.get('/', function(req, res){
 //app.get('/', routes.index); first time load ~/public/index.html
 var html = require('fs').readFileSync(__dirname+'/public/index.html');

app.post('/api/photos', function(req, res) {
 var serverPath = '/images/' + req.files.userPhoto.name;
 my_dir + serverPath,
 function(error) {
  if(error) {
    error: 'Ah crap! Something bad happened'
   path: serverPath

app.listen(3000, function(){
 console.log("Express server listening on port %d in %s mode", 
  app.address().port, app.settings.env);
var nowjs = require("now");
var everyone = nowjs.initialize(app);

everyone.now.distributeMessage = function(message){

It is not perfect, but it works fine. The core part is the callback for app.post -> ‘/api/photos’.
In the following blog, I will list brief client-side code.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: