title: Passing a file from Angular to Node
body: <p>I have built a separate file upload app for cloudant using <a href="https://ciphertrick.com/2015/12/07/file-upload-with-angularjs-and-nodejs/" rel="nofollow noreferrer">https://ciphertrick.com/2015/12/07/file-upload-with-angularjs-and-nodejs/</a> and it works separately.</p>
  
  <p>When i try to integrate it with my bigger application I am not able to pass the values of the file and associated fields into node file.</p>
  
  <p>PFB the code</p>
  
  <p>Html code:</p>
  
  <pre><code>&lt;form ng-controller="Ctrl as up" name="up.upload_form"
                      method="post" enctype="multipart/form-data"&gt;
                          &lt;div&gt;
                              &lt;span&gt; Market&lt;/span&gt;
                              &lt;div isteven-multi-select input-model="market"
                                  output-model="outputMarket" button-label="name"
                                  item-label="name" tick-property="ticked"
                                  on-item-click="outputMarketData(data)" selection-mode="single"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;br&gt;
                          &lt;div&gt;
                              &lt;span&gt; Geo/span&gt;
                              &lt;div isteven-multi-select input-model="geo"
                                  output-label-"selectedGeo"
      output-model="outputGeo"
                                  button-label="name" item-label="name" tick-property="ticked"
                                  on-item-click="outputGeoData(data)" selection-mode="single"&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;br&gt;
                          &lt;div&gt;
                              &lt;span&gt; Unit&lt;/span&gt;
                              &lt;div isteven-multi-select input-model="businessUnitList"
                                  output-model="selectedBusinessUnit" button-label="name"
                                  item-label="name" tick-property="ticked"
                                  on-item-click="outputBusinessUnitData(data)"
                                  selection-mode="single"&gt;&lt;/div&gt;
                          &lt;/div&gt;
                          &lt;br&gt;
                          &lt;div&gt;
                              &lt;span&gt; Browse File: &lt;/span&gt; &lt;input type="file" ngf-select
                                  ng-model="up.file" name="file" ngf-pattern="'application/pdf'"
                                  accept="application/pdf" ngf-max-size="5MB" /&gt; &lt;i
                                  ng-show="up.upload_form.file.$error.required"&gt;*required&lt;/i&gt;&lt;br&gt;
                              &lt;i ng-show="up.upload_form.file.$error.maxSize"&gt;File too
                                  large {{up.file.size / 1000000|number:1}}MB: max 5M&lt;/i&gt; &lt;br&gt;
  
                              &lt;button type="submit" ng-click="up.submit()"&gt;submit&lt;/button&gt;
                              &lt;p&gt;{{up.progress}}
                      &lt;/form&gt;
  </code></pre>
  
  <p>My Controller code</p>
  
  <pre><code> var sbtc;
          this.$scope = $scope;
          sbtc = this;
  $scope.geo = [{
              name: 'North America',
              ticked: false
          }, {
              name: 'Australia',
              ticked: true
          }];
          $scope.market = [{
              name: 'Canada',
              ticked: false
          }, {
              name: 'New Zealand',
              ticked: true
          }, {
              name: 'Mexico',
              ticked: false
          }];
          $scope.businessUnitList = [{
              name: 'Software',
              ticked: false
          }];
          $scope.selectedGeo = $scope.geo[0]
          $scope.selectedMarket = $scope.market[0]
          $scope.selectedBu = $scope.businessUnitList[0]
  
          var opt = {"geo":$scope.selectedGeo.name,"market":$scope.selectedMarket.name,"bu":$scope.selectedBu.name};
          $scope.outputMarketData = function(data) {
              var marketData = data;
              console.log("marketData is : ", marketData.name);
              opt.market = marketData.name;
          };
          $scope.outputGeoData = function(data) {
              var geoData = data;
              console.log("geoData is : ", geoData.name);
              opt.geo = geoData.name;
              console.log("Date data is: ", $scope.dateData);
  
          };
          $scope.outputBusinessUnitData = function(data) {
              var buData = data;
              opt.bu = buData.name
              console.log("buData is : ", buData.name);
          };
  
  
  
          sbtc.submit = function(){ //function to call on form submit
              if (/*sbtc.upload_form.file.$valid &amp;&amp;*/ sbtc.file) { //check if from is valid
  
      console.log( "dfbsmbfnmsb ",opt );
                  sbtc.upload(sbtc.file, opt); //call upload function
              }
          }
          sbtc.upload = function (file, opt) {
              console.log("FILE ",file);
              console.log("OPT",opt);
              Upload.upload({
                  url: 'http://127.0.0.1:8000/upload', //webAPI exposed to upload the file
                  data:{file:file, opt:opt},
                  //pass file as data, should be user ng-model
              }).then(function (resp) { //upload function returns a promise
                  if(resp.data.error_code === 0){ //validate success
                      $window.alert('Success ' + resp.config.data.file.name + 'uploaded');
                      // $window.location.href = 'http://www.google.com'
                      // var timer = setTimeout(function() {
                      //     $window.location.href='https://google.com'
                      // }, 3000);
  
                  } else {
                      $window.alert('an error occured');
                      console.log(resp);
                  }
              }, function (resp) { //catch error
                  console.log('Error status: ' + resp.status);
                  $window.alert('Error status: ' + resp.status);
              }, function (evt) { 
                  console.log(evt);
                  var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                  console.log('progress: ' + progressPercentage + '% ' + evt.config.data.file.name);
                  sbtc.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress
              });
          };
  </code></pre>
  
  <p>My Node code is same as in the one mentioned in the first link. The values of opt and file while trying to get passed into the node file gets undefined. Could someone please tell me why that might happen?</p>