Send PDF file from AngularJS to NodeJS

I experimented with this a while ago, and I came up with this. It's not production ready by a long shot maybe you find it useful. It's free of front end libraries (except Angular ofcourse), but assumes you're using Express 4x and body-parser.

The result:

In the browser:

On the server:

What you're seeing:

You're seeing a tiny node server, serving static index.html and angular files, and a POST route receiving a PDF in base64 as delivered by the HTML FileReader API, and saves it to disk.

Instead of saving to disk, you can send it as an email attachment. See for instance here or here for some info on that.

The example below assumes uploading a PDF by a user through a file input, but the idea is the same for all other ways of sending a document to your back end system. The most important thing is to send the pdf data as BASE64, because this is the format that most file writers and email packages use (as opposed to straight up binary for instance..). This also goes for images, documents etc.

How did I do that:

In your HTML:

<div pdfs>Your browser doesn't support File API.</div>

A directive called pdfs:

myApp.directive('pdfs', ['upload', function(upload) {
    return {
        replace: true,
        scope: function() {
            files = null;
        },
        template: '<input id="files" type="file">',
        link: function(scope,element) {
            element.bind('change', function(evt) {
                scope.$apply(function() {
                    scope.files = evt.target.files;
                });
            });
        },
        controller: function($scope, $attrs) {
            $scope.$watch('files', function(files) {
                //upload.put(files)
                if(typeof files !== 'undefined' && files.length > 0) {
                    for(var i = 0; i<files.length;i++) {
                        readFile(files[i])
                    }
                }
            }, true);

            function readFile(file) {
                var reader = new FileReader();
                reader.addEventListener("loadend", function(evt) {
                    upload.post({name: file.name, data: reader.result})
                })
                if(reader.type = 'application/pdf') {
                    reader.readAsDataURL(file);
                }
            }
        }
    }
}]);

A tiny service:

myApp.service('upload', function($http) {
    this.post = function(file) {
        $http.post('/pdf', file);
    }
});

And a node server:

var express = require('express');
var bodyParser = require('body-parser')
var fs = require("fs");

var app = express();
app.use(express.static('.'));
app.use( bodyParser.json({limit: '1mb'}) );

app.post('/pdf', function(req, res){
  var name = req.body.name;
  var pdf = req.body.data;

  var pdf = pdf.replace('data:application/pdf;base64,', '');

  res.send('received');
  fs.writeFile(name, pdf, 'base64', function(err) {
    console.log(err);
  });
});

var server = app.listen(3000, function() {
    console.log('Listening on port %d', server.address().port);
});