backand Datei hochladen

Question

Ich versuchte, die Backand Datei-Upload zu implementieren, aber ich bekomme diese Fehlermeldung:

"The following action: "files" failed to perform: Object reference not set to an instance of an object".

ich kopieren und einfügen nur die javascript Vorlage aus der Dokumentation der Aktion ist die Standardeinstellung. Auf der Client-Seite filename und filedata sind richtig, ich denke, es ist ein Server Seite Fehler, aber ich kann es nicht verstehen.

-Controller-Code

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

<div ng-init="pets.initCtrl()"> 
    <form role="form" name="uploadForm"> 
     <img ng-src="" ng-show="imageUrl" /> 
     <input id="fileInput" type="file" accept="*/*" ng-model="filename" /> 
     <input type="button" value="x" class="delete-file" title="Delete file" ng-disabled="!imageUrl" ng-click="deleteFile()" /> 
    </form> 
</div> 

 // Display the image after upload 
     self.imageUrl = null; 

     // Store the file name after upload to be used for delete 
     self.filename = null; 

     // input file onchange callback 
     function imageChanged(fileInput) { 

      //read file content 
      var file = fileInput.files[0]; 
      var reader = new FileReader(); 

      reader.onload = function(e) { 
      upload(file.name, e.currentTarget.result).then(function(res) { 
       self.imageUrl = res.data.url; 
       self.filename = file.name; 
      }, function(err){ 
       alert(err.data); 
      }); 
      }; 

      reader.readAsDataURL(file); 
     }; 

     // register to change event on input file 
     function initUpload() { 
      var fileInput = document.getElementById('fileInput'); 

      fileInput.addEventListener('change', function(e) { 
      imageChanged(fileInput); 
      }); 
     } 

     // call to Backand action with the file name and file data 
     function upload(filename, filedata) { 
      // By calling the files action with POST method in will perform 
      // an upload of the file into Backand Storage 
      return $http({ 
      method: 'POST', 
      url : 'https://api.backand.com/1/objects/action/fotos', 
      params:{ 
       name: 'files' 
      }, 
      headers: { 
       'Content-Type': 'application/json' 
      }, 
      // you need to provide the file name and the file data 
      data: { 
       filename: filename, 
       filedata: filedata.substr(filedata.indexOf(',') + 1, filedata.length) //need to remove the file prefix type 
      } 
      }); 
     }; 

     self.deleteFile = function(){ 
      if (!self.filename){ 
      alert('Please choose a file'); 
      return; 
      } 
      // By calling the files action with DELETE method in will perform 
      // a deletion of the file from Backand Storage 
      $http({ 
      method: 'DELETE', 
      url : baseActionUrl + objectName, 
      params:{ 
       "name": filesActionName 
      }, 
      headers: { 
       'Content-Type': 'application/json' 
      }, 
      // you need to provide the file name 
      data: { 
       "filename": self.filename 
      } 
      }).then(function(){ 
      // Reset the form 
      self.imageUrl = null; 
      document.getElementById('fileInput').value = ""; 
      }); 
     } 

     self.initCtrl = function() { 
      initUpload(); 
     } 

Answer 1

i bereits das Problem herauszufinden, wird die HTML-Vorlage noch Raum statt Controller als Steuerung mit

<div class="w3-col l12" ng-init="pets.initCtrl()"> 
<form role="form" name="uploadForm"> 
    <div class="w3-row"> 
    <img ng-src="{{pets.imageUrl}}" ng-show="pets.imageUrl" /> 
    <input class="w3-input" id="fileInput" type="file" accept="*/*" ng-model="pets.filename" /> 
    <input type="button" value="x" class="delete-file" title="Delete file" ng-disabled="!pets.imageUrl" ng-click="pets.deleteFile()" /> 
    </div> 
</form> 
</div>