Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

I am new to angularjs and nodejs.
I want to implement file (.pdf, .jpg, .doc) upload functionality using rest api, angularjs and expressjs.

I have tried to get idea from Use NodeJS to upload file in an API call but still i am not clear about how i can upload file using angularjs and expressjs in REST API.

Can anyone explain me file upload in angularjs and expressjs using REST API with basic example?

share|improve this question
    
Check out multiparty npm module –  mms27 May 14 '14 at 10:43

2 Answers 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

share|improve this answer
    
Now i am able to send file to my nodejs server but how to get that file and save it in some directory? –  Sachin Kumbharkar May 14 '14 at 11:49
up vote 1 down vote accepted

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!");
share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.