Firebase Upload User Image Error

Hi guys i need your help. i keep getting this error

POST https://firebasestorage.googleapis.com/v0/b/talknote-48adf.appspot.com/o?name=%5Bobject%20Object%5D%2FprofilePicture%2F02.jpg 403 ()

i been stuck in here for two days and i really need your help. is there any way to solve this problem.

here's my code:

 var uploader = document.getElementById('uploader');
      var fileButton = document.getElementById('fileButton');

  //Listen for file 
  fileButton.addEventListener('change', function(e){

     //Get File
     var file = e.target.files[0];

     // Get current username
     var user = firebase.auth().currentUser;

     //Create a Storage Ref
     var storageRef = firebase.storage().ref(user + '/profilePicture/' + file.name);

     //Upload file
     var task = storageRef.put(file);     

     //Update Progress Bar 
     task.on('state_changed', 

     function progress(snapshot){
        var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
        uploader.value = percentage;

        //if percentage = 100
        //$(".overlay").hide();         
     },

     function error(err){

     },

     function complete(){

     }

   );           
});

and here's the firebase rule:

service firebase.storage {
  match /b/talknote-48adf.appspot.com/o {
    match /{userId}/profilePicture/{fileName} {
      // Anyone can read
      allow read;
      // Only the user can upload their own profile picture
      // Profile picture must be of content-type "image/*"
      allow write: if request.auth.uid == userId
                   && request.resource.contentType.matches('image/.+');
    }
  }
}