nodejs write simple image blob - Upload.dataUrltoBlob

Question

Simple question. How do I save a image blob in Nodejs from angular.

AngularSide:

$scope.upload = function (dataUrl, picFile) {

  Upload.upload({
    url: 'http://test.dev:3000/register/user/uploads',
    data: {
      file: Upload.dataUrltoBlob(dataUrl, picFile.name)
    },
  }).then(function (response) {
    $timeout(function () {
      $scope.result = response.data;
    });
  }, function (response) {
    if (response.status > 0) $scope.errorMsg = response.status
      + ': ' + response.data;
  }, function (evt) {
    $scope.progress = parseInt(100.0 * evt.loaded / evt.total);
  });
}

nodejs side: Do I need middleware here? if so which one should I use?

router.post('/user/uploads', multipartMiddleware, function(req, resp) {

     var newPath = "/Users/testUser/test_hold_files/" + req.files.file.originalFilename;

     fs.writeFile(newPath, req.files.file, function(err) {

         if (err) {
             console.log("Data Error ");
             return console.error(err);
         }
     });

    res.status(200).jsonp({status: "status: success "});
});

right now this just writes out the file with correct name but its empty.

Answer 1

Ok,

After a long time of messing with this stuff. I found an answer. It does load the file in my folder.

I feel this is only partial since it does not resize the actual file smaller. It is what is selected with https://github.com/danialfarid/ng-file-upload. I used the

  Upload.upload({
    url: 'http://test.dev:3000/register/user/uploads',
    data: {
      file: Upload.dataUrltoBlob(dataUrl, picFile.name)
    },

This did zoom into the file on selected image. It did not make the actual file size smaller. I am still looking into this issue.

var formidable = require('formidable'),
    util = require('util'),
    fs_extra   = require('fs-extra');

This is my post to accept images.

router.post('/user/uploads', function (req, res){
    var form = new formidable.IncomingForm();
    form.parse(req, function(err, fields, files) {
        res.writeHead(200, {'content-type': 'text/plain'});
        res.write('received upload:\n\n');
        res.end(util.inspect({fields: fields, files: files}));
    });

    form.on('end', function(fields, files) {
        /* Temporary location of our uploaded file */
        var temp_path = this.openedFiles[0].path;
        /* The file name of the uploaded file */
        var file_name = this.openedFiles[0].name;
        /* Location where we want to copy the uploaded file */
        var new_location = "/Users/testUser/test_hold_files/";

        fs_extra.copy(temp_path, new_location + file_name, function(err) {
            if (err) {
                console.error(err);
            } else {
                console.log("success!")
            }
        });
    });
});

I have also noticed that I can view the file in chrome but not load it into gimp. Gimp gives me a file error.

Small steps I guess.

Maybe Datsik can give us some insight on what is going on here. https://stackoverflow.com/users/2128168/datsik

Phil