user sks user sks - 2 years ago 257
AngularJS Question

File upload in ExpressJS and AngularJS using the REST API

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 Source

Reference :
I have resolved this problem using following code :


<input type="file" ng-file-select="onFileSelect($files)" multiple>
  $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 /;
      }).success(function(data, status, headers, config) {
        // file is uploaded successfully
      //.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/' +;
fs.rename(tempPath, targetPath, function(err) {
if (err) throw err;
console.log("Upload completed!");
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download