CODEWITHSUNDEEP
angularjsnode.jsng-file-upload
philipfwilson
philipfwilson

Reputation: 757

nodejs write simple image blob - Upload.dataUrltoBlob

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.

Upvotes: 3

Views: 2359

Answers (2)

philipfwilson
philipfwilson

Reputation: 757

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

Upvotes: 0

Datsik
Datsik

Reputation: 14824

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.

Upvotes: 1

Related Questions