I’m working on an Instagram clone using React and Firebase. I’ve hardcoded posts into Firebase and they appear, however I am having issues with letting users make new posts.
My upload has a status bar, a file picker, a caption field, and the upload button. When I pick my file and hit upload, the status bar makes it to 100%, but nothing posts. The image upload is supposed to reset the status bar and the image name once it’s uploaded, but nothing ever posts.
Here is my ImageUpload component:
import React, { useState } from 'react';
import Button from '@material-ui/core/Button';
import { storage, db } from './firebase';
import './ImageUpload.css';
function ImageUpload({username}) {
const [image, setImage] = useState(null);
const [progress, setProgress] = useState(0);
const [caption, setCaption] = useState('');
const handleChange = (e) => {
if (e.target.files[0]) {
setImage(e.target.files[0]);
}
};
const handleUpload = () => {
const uploadTask = storage.ref(`images/${image.name}`).put(image);
uploadTask.on(
"state_changed",
(snapshot) => {
const progress = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(progress);
},
() => {
storage
.ref("images")
.child(image.name)
.getDownloadURL()
.then(url => {
db.collection("posts").add({
caption: caption,
imageUrl: url,
username: username
});
setProgress(0);
setCaption("");
setImage(null);
});
}
);
};
return (
<div className="imageupload">
<progress className="imageupload_progress" value={progress} max="100" />
<input type="text" placeholder="Enter a caption" onChange={event => setCaption(event.target.value)} value={caption} />
<input type="file" onChange={handleChange} />
<Button onClick={handleUpload}>
Upload
</Button>
</div>
)
}
export default ImageUpload
My Firebase.js implementation.
import firebase from "firebase";
const firebaseApp = firebase.initializeApp({
apiKey: "abc etc...",
authDomain: "appname.firebaseapp.com",
databaseURL: "https://appname.firebaseio.com",
projectId: "projectid",
storageBucket: "appname.appspot.com",
messagingSenderId: "1234...",
appId: "1:1a2b"
});
const db = firebaseApp.firestore();
const auth = firebase.auth();
const storage = firebase.storage();
export { db, auth, storage };
Here is part of my App.js that is supposed to save the posts to my firebase database and display on the page.
useEffect(() => {
db.collection('posts').onSnapshot(snapshot => {
setPosts(snapshot.docs.map(doc => ({
id: doc.id,
post: doc.data()
})));
})
}, []);
When I check the console I don’t see any error and when I check firebase, nothing is saving to my posts collection. What am I missing here?