Despite watching multiple videos and tutorials, I am encountering a 403 error while working with Angular 1.
To solve the issue of ng-model not supporting files, I created an Angular directive named 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();
})
}
}
}]);
I then utilized this directive in my 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>
In addition, I implemented a controller handler:
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 adjusted the Firebase Storage rules to "public":
service firebase.storage {
match /b/myFirebaseProject.appspot.com/o {
match /{allPaths=**} {
allow read, write: if request.auth != null;
}
}
}
While everything seems to be functioning correctly with selecting and uploading files, I encounter an error message:
POST https://firebasestorage.googleapis.com/v0/b/myFirebaseProject.appspot.com/o?name=files 403 ()
Even after trying to create a files folder in Firebase Storage, I still receive the 403 error.
Any help would be appreciated!