https://github.com/muhammadabir64/firebase-image-uploader
A simple code sample of how to upload/retrive images from firebase storage
https://github.com/muhammadabir64/firebase-image-uploader
firebase firebase-storage javascript
Last synced: 3 months ago
JSON representation
A simple code sample of how to upload/retrive images from firebase storage
- Host: GitHub
- URL: https://github.com/muhammadabir64/firebase-image-uploader
- Owner: muhammadabir64
- Created: 2022-08-10T15:23:47.000Z (almost 4 years ago)
- Default Branch: main
- Last Pushed: 2023-09-24T10:29:10.000Z (almost 3 years ago)
- Last Synced: 2025-03-27T22:46:37.518Z (over 1 year ago)
- Topics: firebase, firebase-storage, javascript
- Language: HTML
- Homepage:
- Size: 7.81 KB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# firebase-image-uploader
```javascript
const config = {
apiKey: "",
authDomain: "",
projectId: "",
storageBucket: "",
messagingSenderId: "",
appId: "",
databaseURL: ""
};
const app = firebase.initializeApp(config);
const progress_bar = document.getElementById("progress_bar");
const file = document.getElementById("file");
const filename_generator = (Math.random() + 1).toString(36).substring(7);
file.addEventListener("change", function(e){
let file = e.target.files[0];
let storageRef = firebase.storage().ref(filename_generator+file.name);
let task = storageRef.put(file);
task.on("state_changed", function progress(snapshot){
let percentage = (snapshot.bytesTransferred/snapshot.totalBytes)*100;
progress_bar.innerText = Math.round(percentage)+"%";
progress_bar.style.width = Math.round(percentage)+"%";
}, function error(error){
console.log(error);
}, function complete(){
task.snapshot.ref.getDownloadURL().then((url) => {
document.getElementById("img_view_div").classList.remove("d-none");
document.getElementById("img_viewer").src = url;
document.getElementById("img_url").href = url;
document.getElementById("img_url").innerText = url;
console.log(url);
});
});
});
```
## set firebase storage rules
```
service firebase.storage {
match /b/{bucket}/o {
match /{allPaths=**} {
allow read, write: if true;
}
}
}
```
