title: How to upload files with AngularFire to Firebase Storage?
body: <p>I've watched and read a bunch of videos and tutorials but I'm getting a 403 error.</p>
  
  <p>I'm using Angular 1.</p>
  
  <p>First, I made an Angular directive because <code>ng-model</code> doesn't work with files. I called my directive <code>file-model</code>:</p>
  
  <pre><code>app.directive('fileModel',['$parse', function ($parse){
    return {
      restrict: 'A',
      link: function (scope, element, attrs) {
        element.bind('change', function () {
          $parse(attrs.fileModel)
          .assign(scope, element[0].files[0])
          scope.$apply();
        })
      }
    }
  }]);
  </code></pre>
  
  <p>Then I used my directive in the HTML template:</p>
  
  <pre><code>&lt;form ng-submit="uploadFile(file)"&gt;
        &lt;input type="file" accept="txt" file-model="file" class="form-control"&gt;
        &lt;button type="submit" class="btn btn-primary"&gt;Upload File&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>And I made a handler in the controller:</p>
  
  <pre><code>  app.controller('myController', ['$scope', '$firebaseStorage', function($scope, $firebaseStorage) {
  
    // Create a Firebase Storage reference
    var storage = firebase.storage();
    var storageRef = storage.ref();
    var filesRef = storageRef.child('files');
  
    $scope.uploadFile = function(file) {
      console.log("Let's upload a file!");
      console.log($scope.file);
      var storageRef = firebase.storage().ref("files");
      $firebaseStorage(filesRef).$put($scope.file);
    };
  
  }]);
  </code></pre>
  
  <p>Lastly I set the Firebase Storage rules to "public":</p>
  
  <pre><code>service firebase.storage {
    match /b/myFirebaseProject.appspot.com/o {
      match /{allPaths=**} {
        allow read, write: if request.auth != null;
      }
    }
  }
  </code></pre>
  
  <p>Running all this, I can select my test file, click <code>Upload File</code>, and the file loads into the <code>$scope</code>. My directive is working. But then I get an error message:</p>
  
  <pre><code>POST https://firebasestorage.googleapis.com/v0/b/myFirebaseProject.appspot.com/o?name=files 403 ()
  </code></pre>
  
  <p>I tried creating a <code>files</code> folder in Firebase Storage but I got the same 403 error.</p>
  
  <p>Thanks!</p>