title: Upload file as byte array with field data in angularjs to web api
body: <p>I am trying to post a field data with a file (posted as array of bytes in the data base as shown in the figure) and tried this comment  <a href="https://stackoverflow.com/questions/31589856/how-to-upload-file-in-angularjs-frontend">comment</a></p>
  
  <p>but I see the uploaded fields are encapsulated one more step in to object called fied how can I exactly do a post with params id,fname</p>
  
  <p>here is how the Api  <a href="https://i.stack.imgur.com/aSvpc.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/aSvpc.png" alt="API to upload the data "></a></p>
  
  <p>can you please comment my code </p>
  
  <pre><code>    $scope.$watch('files', function () {
          $scope.upload($scope.files);
      });
  
      $scope.upload = function (files) {
          if (files &amp;&amp; files.length) {
              for (var i = 0; i &lt; files.length; i++) {
                  var file = files[i];
                  Upload.upload({
                      url: 'https://angular-file-upload-cors-srv.appspot.com/upload',
                      fields: {
                          'Id': 23,
                          'fname':'name'
                      },
                      file: file
                  }).progress(function (evt) {
                      var progressPercentage = parseInt(100.0 * evt.loaded / evt.total);
                      console.log('progress: ' + progressPercentage + '% ' + evt.config.file.name);
                  }).success(function (data, status, headers, config) {
                      console.log('file ' + config.file.name + 'uploaded. Response: ' + data);
                  }).error(function (data, status, headers, config) {
                      console.log('error status: ' + status);
                  })
              }
          }
      };
  </code></pre>
  
  <p>Here the console display from the inspection </p>
  
  <p>the response data when JSON.stringify called looks like </p>
  
  <blockquote>
    <p>file: Capture.PNG, Response: {"result":[{"fieldName":"Id","value":"23"},{"fieldName":"fname","value":"name"},{"fieldName":"file","name":"Capture.PNG","size":"156273"}],"requestHeaders":{"Host":"angular-file-upload-cors-srv.appspot.com","Accept":"application/json, text/plain, <em>/</em>","Accept-Language":"en-US,en;q=0.8","Content-Length":"156644","Content-Type":"multipart/form-data; boundary=----WebKitFormBoundaryrU857yqmqVnWHbFD","origin":"<a href="http://fiddle.jshell.net" rel="nofollow noreferrer">http://fiddle.jshell.net</a>","Referer":"<a href="http://fiddle.jshell.net/_display/" rel="nofollow noreferrer">http://fiddle.jshell.net/_display/</a>","User-Agent":"Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.134 Safari/537.36","X-AppEngine-Country":"ET","X-AppEngine-Region":"?","X-AppEngine-City":"addis ababa","X-AppEngine-CityLatLong":"9.022736,38.746799"}}</p>
  </blockquote>
  
  <p><a href="https://i.stack.imgur.com/2jrvv.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/2jrvv.png" alt="enter image description here"></a></p>