Whats the node.js server-side code to process the incoming req from phonegap ft.upload?

Question

Whats the node.js server-side code to process the incoming req from phonegap ft.upload?

I have part-developed a hybrid Android app using node.js for my server and javascript, jquery, phonegap (now called cordova 1.6.0) for the app.

Part of the app allows the user to take a photo using the smartphone camera and then upload it to the server.

My code in the app that uploads the image is...

    var imageURI = document.getElementById('display_image').src;
    if (!imageURI) { // || (self.elem.image_play.style.display == "none")) {
        console.log('no image uri defined - ' + JSON.stringify(imageURI));
        //document.getElementById('camera_status').innerHTML = "Take picture or select picture from library first.";
        return;
    }

    // Verify server has been entered
    server = 'http://192.168.1.3:8180/newimage/';
    if (server) {
        console.log("starting upload");
        // Specify transfer options
        var options = new FileUploadOptions();
        options.fileKey="file";
        options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
        options.mimeType="image/jpg";
        options.chunkedMode = false;

        // Transfer picture to server
        var ft = new FileTransfer();
        ft.upload(imageURI, server, function(r) {
            console.log("upload successful"+r.bytesSent+" bytes uploaded.");
            //document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";
        }, function(error) {
            console.log("upload failed - Error Code = "+error.code);
            //document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;
        }, options);
    }

This works fine however I can't figure out how to handle the image on the node.js server. Currently my code is:

'/newimage/': function(req,res){

    var chunks;

    req.addListener('data', function (chunk) {
        console.log('in data processing');
        chunks.push(chunk);
    });

    req.addListener('end', function () {
        console.log('completing data processing');
        fs.writeFile("out.jpg", chunks, function(err) {
            console.log(err);
        });
    });
}

This server method executes but neither of the console.log lines execute.

I have been trying for 2 days to sort this out and I have tried many different ways but I can't figure it out how to process the incoming image file from the phonegap ft.upload method. Can anybody help with this?

Once I have this sorted, my final aim is to upload the image file to amazon s3 storage which I guess I can use knox module for.

node.js
cordova
image-uploading

Answer 1

I am using the node formidable and fs modules to write the uploaded image to a /tmp folder on the nodejs server to do OCR later. Code is based on image upload example from the www.nodebeginner.org book.

My JS code in phonegap project in the uploadPicture() method :

 // Specify transfer options
        var options = new FileUploadOptions();
        options.fileKey="file";
        options.fileName=imageURI.substr(imageURI.lastIndexOf('/')+1);
        options.mimeType="image/jpeg"
        options.chunkedMode = false;

        // Transfer picture to server
        var ft = new FileTransfer();
        ft.upload(imageURI, server, function(r) {
            document.getElementById('camera_status').innerHTML = "Upload successful: "+r.bytesSent+" bytes uploaded.";              
        }, function(error) {
            document.getElementById('camera_status').innerHTML = "Upload failed: Code = "+error.code;               
        }, options, true);

My code in requesthandler.js on the node server :

function upload(response, request) {
    console.log("Request handler 'upload' was called.");
    var form = new formidable.IncomingForm();
    form.parse(request, function(error, fields, files) {

        //logs the file information 
        console.log(JSON.stringify(files))

        fs.rename(files.file.path, "/tmp/test.png", function(err) {
            if (err) {
                fs.unlink("/tmp/test.png");
                fs.rename(files.file.path, "/tmp/test.png");
            }
        });
        response.writeHead(200, {"Content-Type": "text/html"});
        response.write("received image:<br/>");
        response.write("<img src='/show' />");
        response.end();
    });
}