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.

Datsik · Accepted Answer · 2016-02-28 09:14:10Z

1

You used to be able to access the uploaded file through req.files.imageName and then you would fs.readFile from tmp and write it permanently, which is no longer the case in express 4.0

In Express 4, req.files is no longer available on the req object by default. To access uploaded files on the req.files object, use multipart-handling middleware like busboy, multer, formidable, multiparty, connect-multiparty, or pez.

Soooooooo, you can feel free to use which ever one of those middlewares names above and then follow their API for dealing with uploaded files like images. Hope this helps, enjoy.

answered Feb 28, 2016 at 9:14

Datsik

14.9k15 gold badges85 silver badges129 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

philipfwilson Over a year ago

Thanks for you comment. Node is great and fast.. just missing some very basic stuff. Thanks again for the heads up about middle ware.

Community · Accepted Answer · 2017-05-23 12:24:31Z

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

Collectives™ on Stack Overflow

nodejs write simple image blob - Upload.dataUrltoBlob

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related