Benutzerdefinierte upload + in einem Knopf einreichen angularjs

Question

Ich habe versucht, etwas in eckigen zu finden, aber war nicht glücklich. Was habe ich gefunden, dass ich irgendwie Methode "onchange" verwenden muss. Nein, mein Code wie folgt aussieht:

<form ng-controller="uploadCtrl as up" name="up.upload_form"> 
     <div class="fileUpload btn btn-primary"> 
        <span>Upload</span> 
        <input type="file" class="upload" 
          ngf-select 
          ng-model="up.file" 
          name="file" 
          ngf-max-size="20MB"/></div> 
    <button type="submit" class="btn btn-default" ng-click="up.submit()">Upload</button> 
    <i ng-show="up.upload_form.file.$error.required">*required</i><br> 
    <i ng-show="up.upload_form.file.$error.maxSize">File too large 
     {{up.file.size/1000000|number:1}}MB: max 20M</i> 
    <button class="btn btn-default" ng-click="compare_it()">Compare it</button> 
        <pre>{{up.progress}}</pre> 
</form> 

dies ist mein Controller

app.controller('uploadCtrl',['Upload','$window',function(Upload,$window){ 
    var vm = this; 
    vm.submit = function(){ //function to call on form submit 
     if (vm.upload_form.file.$valid && vm.file) {//check if from is valid 

      //console.log(vm.file.name); 
      vm.upload(vm.file); //call upload function 
      //vm.file.name = prompt("put you name"); 
     } 
    }; 

    vm.upload = function (file) { 
     Upload.upload({ 
      url: '/upload', //webAPI exposed to upload the file 
      data:{file:file} //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.'); 
      } else { 
       $window.alert('an error occured'); 
      } 
     }, 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); 
      vm.progress = 'progress: ' + progressPercentage + '% '; // capture upload progress 
     }); 
    }; 
}]); 

Gibt es trotzdem input type = "file" zu fusionieren und Button type = "submit"? Ich schätze jede Hilfe

Answer 1

In der Steuerung:

$scope.$watch("up.file", function() { if (up.file) up.submit() }); 

Oder in der Ansicht:

<input type="file" class="upload" 
         ngf-select 
         ng-model="up.file" 
         ng-change="up.submit()" 
         name="file" 
         ngf-max-size="20MB"/>