Sending an image to Node.js server from client (AngularJS)

You can use below libraries, they have good documentation also

For Frontend - https://github.com/nervgh/angular-file-upload

For Backend - https://github.com/expressjs/multer

Sample Snippet -

In HTML :

<input type="file" nv-file-select="" uploader="ctrl.uploader" multiple />

Angular Controller :

vm.uploader = new FileUploader({
    url: 'http://' + SERVER_URL + '/upload',
    formData: [{
        id: 1
    }]
});

vm.save = function() {
    vm.uploader.onBeforeUploadItem = function (item) {
        console.log(item);
        /* some action */
    };

    vm.uploader.onSuccessItem = function (item, imgResponse, status, headers) {
        console.log(item);
        console.log(imgResponse);
        console.log(status);
        console.log(headers);
        /* some action */
    };
};

Node Server :

var fs = require('fs');
var multer = require('multer');

var fileName = '';
var storage = multer.diskStorage({
    destination: function (req, file, cb) {
        var dirPath = 'path/to/save/file'
        if (!fs.existsSync(dirPath)) {
            var dir = fs.mkdirSync(dirPath);
        }
        cb(null, dirPath + '/');
    },
    filename: function (req, file, cb) {
        var ext = file.originalname.substring(file.originalname.lastIndexOf("."));
        fileName = Date.now() + ext;
        cb(null, fileName);
    }
});

// Assuming Express -
app.get('/upload', function (req, res) {
    var upload = multer({
        storage: storage
    }).array('file', 12);

    upload(req, res, function (err) {
        if (err) {
            // An error occurred when uploading
            res.json(err);
        }
        res.json(fileName);
    });
});

You can try multipart/form-data like this:

<form id       =  "uploadForm"
     enctype   =  "multipart/form-data"
     action    =  "/api/photo"
     method    =  "post"
>
<input type="file" name="userPhoto" />
<input type="submit" value="Upload Image" name="submit">
</form>