CODEWITHSUNDEEP
node.jsexpresssocket.io
RedDot
RedDot

Reputation: 71

Save a image using nodejs, expressjs and socket.io

I've tried to save a image to a specified directory with node.js using express.js and socket.io but it doesnt work.

On the client-side:

var reader = new FileReader();
function drop(e) {
    e.stopPropagation();
    e.preventDefault();

    var dt      = e.dataTransfer;
    var files   = dt.files;
    jQuery.each(files, function(){

        reader.onload = function(e) {
            socket.emit('sendfile', e.target.result);
        };
    });
    return false;
}

The image should be uploaded by a drag and drop function.

Then on the server-side:

io.sockets.on('connection', function (socket) {
[...]
    socket.on('sendfile', function (data) {
        var fs = require('fs');
        app.use(express.bodyParser({ keepExtensions: true, uploadDir: '/uploaded' }));

        io.sockets.emit('updatechat', socket.username, data); //test
    });

I have also tried

socket.on('sendfile', function (data) {
        var fs = require('fs');
        fs.writeFile('/uploaded/test.png', data, "binary" , function (err) {
          if (err) throw err;
          console.log('It\'s saved!');
        });
        io.sockets.emit('updatechat', socket.username, data); //data test
    });

but it doesnt saved anything. The "data test" shows me, that the data are already were arrived on the server, so I don't think, that the problem comes from the client-side, but on the server-side I have no idea what I doing wrong

Upvotes: 3

Views: 7645

Answers (2)

Ito
Ito

Reputation: 2167

I made a simple example to illustrate the usage of file upload via socket!

The steps following are:

  1. Create the send-file socket.io event to receive the file on app.js. This file received is a binary one;
  2. In the jade/HTML page put an input file and a button to send it. NOTE: you don't have to use multipart to send a post with multipart content, we are sending socket files not a TCP request/response;
  3. Initialize HTML5 File API support and prepare the listeners to watching out your file input component;
  4. The rest of remaining routines to read the file and sent it content forward.

Now first step (app.js):

var io = require('socket.io').listen(8000, {log: false});

io.sockets.on('connection', function(socket) {
    socket.on('send-file', function(name, buffer) {
        var fs = require('fs');

        //path to store uploaded files (NOTE: presumed you have created the folders)
        var fileName = __dirname + '/tmp/uploads/' + name;

        fs.open(fileName, 'a', 0755, function(err, fd) {
            if (err) throw err;

            fs.write(fd, buffer, null, 'Binary', function(err, written, buff) {
                fs.close(fd, function() {
                    console.log('File saved successful!');
                });
            })
        });

    });
});

Second step (in my case I've used jade rather html)

extends layout

block content
    h1 Tiny Uploader
    p Save an Image to the Server
    input#input-files(type='file', name='files[]', data-url='/upload', multiple)
    button#send-file(onclick='javascript:sendFile();') Send

    script(src='http://127.0.0.1:8000/socket.io/socket.io.js')
    script(src='/javascripts/uploader.js')

Third and Fourth steps (coding uploader.js to send the file to server)

//variable declaration
var filesUpload = null;
var file = null;
var socket = io.connect('http://localhost:8000');
var send = false;

if (window.File && window.FileReader && window.FileList) {
    //HTML5 File API ready
    init();
} else {
    //browser has no support for HTML5 File API
    //send a error message or something like that
    //TODO
}

/**
 * Initialize the listeners and send the file if have.
 */
function init() {
    filesUpload = document.getElementById('input-files');
    filesUpload.addEventListener('change', fileHandler, false);
}

/**
 * Handle the file change event to send it content.
 * @param e
 */
function fileHandler(e) {
    var files = e.target.files || e.dataTransfer.files;

    if (files) {
        //send only the first one
        file = files[0];
    }
}

function sendFile() {
    if (file) {
        //read the file content and prepare to send it
        var reader = new FileReader();

        reader.onload = function(e) {
            console.log('Sending file...');
            //get all content
            var buffer = e.target.result;
            //send the content via socket
            socket.emit('send-file', file.name, buffer);
        };
        reader.readAsBinaryString(file);
    }
}

Some important considerations:

This is a tiny sample of socket file uploader. I don't consider some important things here: file chunks to send piece of files instead of all content in a row; Update the status of file sent as (error msg, successful msg, progress bar or percent stage, etc.). So this is a sample to initial steps to coding your own file uploader. In this case, we don't need a form to send files, its is completely asynchronous transaction via socket.io.

I hope this post is helpful.

Upvotes: 9

Pierre Inglebert
Pierre Inglebert

Reputation: 3930

This tutorial goes a little bit further because you can pause/resume your upload but you will find how to upload a file through socketio :)

Upvotes: 0

Related Questions