I know this question is asked several times, but unfortunately nothing seems to work for me.

I post the src of an img to my node/express. It looks like this:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA+Q1JF ... UUUUAFFFFAH/2Q==

The data is saved in picture. I cut of the data:image-stuff and got the raw base64 and the filetype.

    var result = {
        "type":"",
        "data":""
    }

    var matches = picture.match(/^data:image\/([A-Za-z-+\/]+);base64,(.+)$/),response = {};
    result.type = matches[1];
    result.data = new Buffer(matches[2], 'base64');

    require('fs').writeFile(mediaFolder+'/test.'+result.type, result.data, "binary", function(err){
        res.status(500).send("error");
    });

    res.status(200).send("success");

When I try to open the saved image it says: Damaged or too big. I also tried to set the "binary" parameter in the writeFile methode. The client always gets the 200 http status.

I don't know what's wrong with this. I checked the raw base64 String with an online decoder. It worked perfectly. I logged every string/match and everything looked okay to me.

Any help would be nice to solve this Problem.
Thanks in advance!

EDIT:

This is how I send the picture:

var base64Image = $('#show-picture').attr('src');
xmlhttp.open("POST","/webapp-ajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("picture="+base64Image);

I know this question is asked several times, but unfortunately nothing seems to work for me.

I post the src of an img to my node/express. It looks like this:

data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD//gA+Q1JF ... UUUUAFFFFAH/2Q==

The data is saved in picture. I cut of the data:image-stuff and got the raw base64 and the filetype.

    var result = {
        "type":"",
        "data":""
    }

    var matches = picture.match(/^data:image\/([A-Za-z-+\/]+);base64,(.+)$/),response = {};
    result.type = matches[1];
    result.data = new Buffer(matches[2], 'base64');

    require('fs').writeFile(mediaFolder+'/test.'+result.type, result.data, "binary", function(err){
        res.status(500).send("error");
    });

    res.status(200).send("success");

When I try to open the saved image it says: Damaged or too big. I also tried to set the "binary" parameter in the writeFile methode. The client always gets the 200 http status.

I don't know what's wrong with this. I checked the raw base64 String with an online decoder. It worked perfectly. I logged every string/match and everything looked okay to me.

Any help would be nice to solve this Problem.
Thanks in advance!

EDIT:

This is how I send the picture:

var base64Image = $('#show-picture').attr('src');
xmlhttp.open("POST","/webapp-ajax",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("picture="+base64Image);

• javascript
• image
• node.js
• express
• base64

• How are you sending the file to the server? – Dave Commented Apr 26, 2014 at 10:28
• I use XMLHttpRequest and post it to node/express – DaTebe Commented Apr 26, 2014 at 10:35
• Are you using encodeURIComponent? – Dave Commented Apr 26, 2014 at 10:43
• I have edited my Question with the Code of how I send the picture to node. – DaTebe Commented Apr 26, 2014 at 10:51
• Why not just send the image file, why do you mess around with base64 to begin with ? – adeneo Commented Apr 26, 2014 at 10:58

1 Answer 1

I believe you need to use encodeUriComponent(base64) before sending to server.

try sending a JSON object, and parsing the image on the client side.

For example:

var mimeType = image.split(';')[0];

var base64 = encodeUriComponent(image.split(',')[1]);

var imageData = {

  "mimeType" : mimeType,

  "src" : base64

}

...

xmlhttp.setRequestHeader("Content-type","application/json");
xmlhttp.send(imageData);