Backand File Upload

Question

I tried to implement the Backand file upload, but I get this error:

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

I just copy paste the javascript template from the documentation the action is the default to. On client side filename and filedata are right, I think its a server side error but I can't understand it.

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 already find out the problem, is the html template still using scope instead controller as control

<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>