How to upload files with AngularFire to Firebase Storage?

Question

I've watched and read a bunch of videos and tutorials but I'm getting a 403 error.

I'm using Angular 1.

First, I made an Angular directive because ng-model doesn't work with files. I called my directive file-model:

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();
      })
    }
  }
}]);

Then I used my directive in the HTML template:

<form ng-submit="uploadFile(file)">
      <input type="file" accept="txt" file-model="file" class="form-control">
      <button type="submit" class="btn btn-primary">Upload File</button>
</form>

And I made a handler in the controller:

  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);
  };

}]);

Lastly I set the Firebase Storage rules to "public":

service firebase.storage {
  match /b/myFirebaseProject.appspot.com/o {
    match /{allPaths=**} {
      allow read, write: if request.auth != null;
    }
  }
}

Running all this, I can select my test file, click Upload File, and the file loads into the $scope. My directive is working. But then I get an error message:

POST https://firebasestorage.googleapis.com/v0/b/myFirebaseProject.appspot.com/o?name=files 403 ()

I tried creating a files folder in Firebase Storage but I got the same 403 error.

Thanks!

Mike McDonald · Accepted Answer · 2017-02-15 17:09:59Z

1

The rules you posted aren't public, they require authentication. Instead you want to use something like:

service firebase.storage {
  match /b/myFirebaseProject.appspot.com/o {
    match /{allPaths=**} {
      allow read, write;
    }
  }
}

Or use Firebase Authentication in your app.

answered Feb 15, 2017 at 17:09

Mike McDonald

16k2 gold badges49 silver badges49 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Thomas David Kehoe Over a year ago

Thanks, it's working now! I copied and pasted the "public" rules that Firebase provides but had some problems cutting and pasting.

Collectives™ on Stack Overflow

How to upload files with AngularFire to Firebase Storage?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related