java - How to upload a file using xmlHTTPRequest in angular js? -

i want upload file in angular. have tried following :

<div > <form  enctype="multipart/form-data" method="post" novalidate name="form">                               <input type="file"  onchange="angular.element(this).scope().setfile(this)" required>                                     {{files.name}}                       <div >         <button type="button" ng-class="{'tbt-btn':true, 'primary-btn':true}" ng-click="uploadfile(form,files)">save</button>                </div> </form> </div> 

js---

 $scope.uploadfile = function (form,files) {      if (form.$invalid) return;      var path = files;              var uploadprogress = function (e) {         if (e.lengthcomputable) {           var percent = math.round(e.loaded * 100 / e.total);           console.log('upload progress: ' + percent + '%');         }       },       uploadcomplete = function (e) {         if (e.target.status !== 200) {           uploaderror(e);           return;         }         var locations = json.parse(e.target.responsetext);         //function want call       },       uploaderror = function (e) {        },       uploadabort = function (e) {        };      var fd = new formdata();     var files = files;     (var = 0; < files.length; i++) {       fd.append("file", files[i]);     }      var xhr = new xmlhttprequest();     xhr.upload.addeventlistener("progress", uploadprogress, false);     xhr.addeventlistener("load", uploadcomplete, false);     xhr.addeventlistener("error", uploaderror, false);     xhr.addeventlistener("abort", uploadabort, false);             xhr.open("post", "/fileupload");             xhr.send(fd); 

}

but not working .i getting error - "missing initial multi part boundary" , not sure parameters need pass in xhr.open();. can please me on this?

thanks

you can use simple control upload file:

html:

  <input type="file" data-ng-model="filename" class="form-control" onchange="angular.element(this).scope().uploadfile(this.files)"                                    name="file"> 

controller:

   $scope.uploadfile = function (files) {                 var fd = new formdata();                 fd.append("file", files[0]);                  "your api (fd)".then(function (response) {                     if (files && files[0]) {                         var reader = new filereader();                         reader.onload = function (e:any) {                             $('#blah').attr('src', e.target.result).width(190).height(200);                         };                         reader.readasdataurl(files[0]);                     }                      $scope.imagename = response;                  })             };