Upload feature using React and Firebase

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?

Hi! I have an example of using React and Firebase for uploading files. I remember that i had issues with “grabing the file correctly”. You might have a look at this part of my example.

Check out:

or:

Let me know if theese lines of codes helped you.

Best regards,
Thorsten