This repo contains a samples image upload library that shows a working sample on how to upload image to firebase Firebase using the firebase image upload API.

The firebase API can be tricky at times given that for the image upload to work user may need to be logged in, have permissions set in firebase storage rules,

Add this inbetween the tags if you have not already done so.

<script src="https://www.gstatic.com/firebasejs/3.3.0/firebase.js"></script>
<script>
  // Initialize Firebase
  // TODO: Replace with your project's customized code snippet
  var config = {
    apiKey: "<API_KEY>",
    authDomain: "<PROJECT_ID>.firebaseapp.com",
    databaseURL: "https://<DATABASE_NAME>.firebaseio.com",
    storageBucket: "<BUCKET>.appspot.com",
  };
  firebase.initializeApp(config);
</script>

firebase-image-upload/
├── upload.js
├── upload.html

• Be sure your user is logged in. Here is a firebase tutorial on that

• Insert your logged in User's Id Retrieve the userId , Find this line in upload.js var uploadTask = storageRef.child(localStorage.myFirebase_user_id+"/"+timeStamp+"/"+ fileName).put(fileObject); . And replace localStorage.myFirebase_user_id with your logged in userID variable . Eg. var uploadTask = storageRef.child(localStorage.myFirebase_user_id+"/"+timeStamp+"/"+ fileName).put(fileObject);

Login to your firebase console, click on STORAGE, then click on RULES Replace whatever default code you have their with the one below: Don't forget to replace <PROJECT_ID> with your firebase project's ID

service firebase.storage {
  match /b/project-<PROJECT_ID>.appspot.com/o {
    match /{userId}/{timestamp}/{fileName} {
      allow write: if request.auth.uid == userId;
      allow read;
    }
  }
}

Otherwise you could be getting errors such as firebase error: storage unauthorized firebase error: permission denied and firebase error: 403 not found, user does not have permission to access /image

• I have made Youtube Tutorials for Firebase, don't forget to subscribe: Youtube.com/c/braintemorg *If you have any questions or discussions, you can leave them under each youtube video, I'll be there to help.

• You can get tutorials from the official Firebase' website https://firebase.google.com

Please file a GitHub issue to report a bug.

• Star this repo Follow me on my social media handles
• Subscribe on Youtube
• Follow on Twitter
• Follow on Instagram
• Like on Facebook

• You can reach the me on [email protected]
• Just buzz me up on facebook

Fireblogger is open-sourced software licensed under the MIT license.