File upload in ExpressJS and AngularJS using the REST API

Question

I am new to AngularJS and Node.js.

I want to implement file (.pdf, .jpg, .doc) upload functionality using the REST API, AngularJS and Express.js.

I have tried to get an idea from Use NodeJS to upload file in an API call but I am still not clear how I can upload files using AngularJS and Express.js in the REST API.

Can anyone explain to me how to upload files in AngularJS and Express.js using the REST API, with basic examples?

Answer 1

Reference : https://github.com/danialfarid/angular-file-upload
I have resolved this problem using following code :

Angularjs

HTML

<input type="file" ng-file-select="onFileSelect($files)" multiple>

JS

  $scope.onFileSelect = function($files) {
    //$files: an array of files selected, each file has name, size, and type.
    for (var i = 0; i < $files.length; i++) {
      var file = $files[i];
      $scope.upload = $upload.upload({
        url: 'server/upload/url', //upload.php script, node.js route, or servlet url
        // method: 'POST' or 'PUT',
        // headers: {'header-key': 'header-value'},
        // withCredentials: true,
        data: {myObj: $scope.myModelObj},
        file: file, // or list of files: $files for html5 only
        /* set the file formData name ('Content-Desposition'). Default is 'file' */
        //fileFormDataName: myFile, //or a list of names for multiple files (html5).
        /* customize how data is added to formData. See #40#issuecomment-28612000 for sample code */
        //formDataAppender: function(formData, key, val){}
      }).progress(function(evt) {
        console.log('percent: ' + parseInt(100.0 * evt.loaded / evt.total));
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
        console.log(data);
      });
      //.error(...)
      //.then(success, error, progress); 
      //.xhr(function(xhr){xhr.upload.addEventListener(...)})// access and attach any event listener to XMLHttpRequest.
    }
    /* alternative way of uploading, send the file binary with the file's content-type.
       Could be used to upload files to CouchDB, imgur, etc... html5 FileReader is needed. 
       It could also be used to monitor the progress of a normal http post/put request with large data*/
    // $scope.upload = $upload.http({...})  see 88#issuecomment-31366487 for sample code.
  };

Nodejs using expressJS

var path = require('path'),
    fs = require('fs');
var tempPath = req.files.file.path,
    targetPath = path.resolve('./uploadFiles/' + req.files.file.name);
fs.rename(tempPath, targetPath, function(err) {
if (err) throw err;
console.log("Upload completed!");

Answer 2

I've been dealing with a similar problem recently. Thing is, angular doesn't have the best support for input type "file", because you cannot bind it 2 way. That is why people made custom directives for that. The one I used has some neat examples.

Its called angular-file-upload