Angular File Upload Richtlinie nicht Controller-Modell

Question

aktualisieren

Ich versuche, diese [tutorial] zu folgen, aber kann es nicht funktionieren.

Mein Angular Controller protokolliert undefined für ein Modell, das in meiner Direktive erstellt wurde. Hier ist ein [JSFiddle] davon arbeiten erstellt mein Autor des Tutorials.

Das Problem ist die Ansicht kann $scope.myFile finden und aber Controller nicht ($scope.myFile ist undefined).

Die Ansicht zeigt {{ myFile.name }} an (als Beispiel my-image.jpg). Die Variable myFile ist ein JS-Objekt, das Daten zur ausgewählten Datei enthält. Das funktioniert gut. Die Direktive scheint dem Modell den Wert der ausgewählten Datei zuzuordnen (und zeigt sie somit korrekt in der Ansicht an).

<input file-model="myFile" type="file"/ > 
<div class="label label-info"> 
    {{ myFile.name }} 
</div> 
<button ng-click="uploadDocs()">Click</button> 

Hier ist die Direktive, die ich von dieser [tutorial] bekommen habe.

Da file Eingangstyp nicht ng-model verwenden kann, setzt diese Richtlinie das Modell mit einem file Eingang zugeordnet werden, change Ereignis einer Datei jedes Mal Feuer zuweisen.

directive('fileModel', [ 
    '$parse', 
    function ($parse) { 
     return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var model = $parse(attrs.fileModel); 
      var modelSetter = model.assign; 

      element.bind('change', function(){ 
      scope.$apply(function(){ 
       if (element[0].files.length > 1) { 
       modelSetter(scope, element[0].files); 
       } 
       else { 
       modelSetter(scope, element[0].files[0]); 
       } 
      }); 
      }); 
     } 
     }; 
    } 
    ]). 

Im Controller ich log $scope.myFile gerade. Dies wird von der Schaltfläche im obigen HTML aufgerufen. Im Idealfall würde ich die Dateien hier auf den Server hochladen, aber ich kann nicht, weil $scope.myFile nicht definiert ist.

$scope.uploadDocs = function() { 
    var file = $scope.myFile; 
    console.log($scope.myFile); 
}; 

Kann mir jemand sagen, warum die Ansicht $scope.myFile recieving sein würde, aber das Controller-Protokoll undefined für $scope.myFile?

Answer 1

Ich stieß auf das gleiche Problem beim Versuch, auf eine Direktive Variable vom Controller zuzugreifen. In meinem Fall könnte ich myFile für den Controller zur Verfügung stellen, aber ich musste scope.$parent.$parent.myFile aus der Richtlinie zuweisen.Ich habe nicht in einer Tiefe von Vorfahren zu hart Code wollen, um die Variable zuzugreifen, so dass ich am Ende einen Dienst mit der Variable zwischen Richtlinie und Controller zu teilen:

.factory('fileService', function() { 
    var files = []; 
    return files; 
}) 

Meine Richtlinie Code änderte sich die verwenden statt attrs.fileModel Dienst, der im Tutorial verwendet:

.directive('fileModel', ['$parse', 'fileService', function ($parse, fileService) { 
    return { 
     restrict: 'A', 
     link: function(scope, element) { 
      element.bind('change', function(){ 
       scope.$apply(function(){ 
        if (element[0].files != undefined) { 
         fileService.push(element[0].files[0]); 
         console.log('directive applying with file'); 
        } 
       }); 
      }); 
     } 
    }; 
}]) 

Dann, nach File in die Steuerung Injektion ich die Datei direkt aus File zugreifen konnte:

$scope.uploadDocs = function() { 
    console.log(fileService); 
}; 

Answer 2

Ich habe dieses Tutorial gesehen, aber entschieden, diese Bibliothek Hexe für die Verwendung von Datei hochladen nahtlose macht: ng-file-upload

Answer 3

unten Lösung Versuchen: HTML-Code:

<div class="btn-header"> 
    <label for="attachment" class="control-label">Attachment</label> 
    <div class="has-feedback"> 
     <input type="file" id="fileUpload" name="attachment" ng-disabled="BRPTab.BRPTelePhonyandTestScipt.Checked" 
       class="form-control" data-ak-file-model="BRPTab.tutorial.attachment" /> 
     <span class="form-control-feedback" aria-hidden="true"></span> 
     <div class="help-block with-errors"></div> 
    </div> 
</div> 

Code für Service:

AppService.factory("entityService", ["akFileUploaderService", function(akFileUploaderService) { 
    var saveTutorial = function(tutorial, url) { 

     return akFileUploaderService.saveModel(tutorial, url); 
    }; 
    return { 
     saveTutorial: saveTutorial 
    }; 
}]); 

(function() { 
    "use strict" 
    angular.module("akFileUploader", []) 
     .factory("akFileUploaderService", ["$q", "$http", 
      function($q, $http) { 
       var getModelAsFormData = function(data) { 
        var dataAsFormData = new FormData(); 
        angular.forEach(data, function(value, key) { 
         dataAsFormData.append(key, value); 
        }); 

        return dataAsFormData; 
       }; 

       var saveModel = function(data, url) { 


        var deferred = $q.defer(); 
        $http({ 
         url: url, 
         method: "POST", 
         //data: 
         // { 
         //  tutorial: getModelAsFormData(data), 
         //  Object: Obj 
         // }, 
         //params: Indata, 
         data: getModelAsFormData(data), 
         transformRequest: angular.identity, 
         headers: { 
          'Content-Type': undefined 
         } 
        }).success(function(result) { 

         deferred.resolve(result); 
        }).error(function(result, status) { 
         deferred.reject(status); 
        }); 
        return deferred.promise; 
       }; 

       return { 
        saveModel: saveModel 
       } 

      } 
     ]) 
     .directive("akFileModel", ["$parse", 
      function($parse) { 
       return { 
        restrict: "A", 
        link: function(scope, element, attrs) { 
         var model = $parse(attrs.akFileModel); 
         var modelSetter = model.assign; 
         element.bind("change", function() { 
          scope.$apply(function() { 
           modelSetter(scope, element[0].files[0]); 
          }); 
         }); 
        } 
       }; 
      } 
     ]); 
})(window, document); 

Lassen Sie mich wissen, wenn Sie irgendwelche Probleme haben.

Answer 4

versuchen diesen Code

   <html> 

       <head> 
        <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script> 
       </head> 

       <body ng-app = "myApp"> 

        <div ng-controller = "myCtrl"> 
        <input type = "file" file-model = "myFile"/> 
        <button ng-click = "uploadFile()">upload me</button> 
        </div> 

        <script> 
        var myApp = angular.module('myApp', []); 

        myApp.directive('fileModel', ['$parse', function ($parse) { 
         return { 
          restrict: 'A', 
          link: function(scope, element, attrs) { 
           var model = $parse(attrs.fileModel); 
           var modelSetter = model.assign; 

           element.bind('change', function(){ 
           scope.$apply(function(){ 
            modelSetter(scope, element[0].files[0]); 
           }); 
           }); 
          } 
         }; 
        }]); 

        myApp.service('fileUpload', ['$http', function ($http) { 
         this.uploadFileToUrl = function(file, uploadUrl){ 
          var fd = new FormData(); 
          fd.append('file', file); 

          $http.post(uploadUrl, fd, { 
           transformRequest: angular.identity, 
           headers: {'Content-Type': undefined} 
          }) 

          .success(function(){ 
          }) 

          .error(function(){ 
          }); 
         } 
        }]); 

        myApp.controller('myCtrl', ['$scope', 'fileUpload', function($scope, fileUpload){ 
         $scope.uploadFile = function(){ 
          var file = $scope.myFile; 

          console.log('file is '); 
          console.dir(file); 

          var uploadUrl = "/fileUpload"; 
          fileUpload.uploadFileToUrl(file, uploadUrl); 
         }; 
        }]); 

        </script> 

       </body> 
      </html> 

Answer 5

Dieses Problem wird in einigen Angular Versionen zu sehen ist, wo Objektdatei nicht den Umfang variabel eingestellt werden kann. Als eine Arbeit um zu machen, das Feld übergeben an die Steuerung verwenden diese Objektdatei hochladen (nicht von scope)

HTML-Formular

<form> 
    <div class="form-group"> 
        <label for="myFileField">Select a file: </label> 
        <input type="file" file-model="myFile" /> <label>File Name:</label> 
        <input type="text" ng-model="filename"></input> 
       </div> 
       <button ng-click="uploadFile(myFile)" class="btn btn-primary">Upload File</button> 
      </form> 

-Controller

$scope.uploadFile = function (file1) { 
      var file = $scope.myFile; // this is undefined 
      console.log("My file =" +file1); // you get this 
      // Make http call to upload the file or make service call   
} 

Hope this löst das Problem