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]) {

  const handleUpload = () => {
    const uploadTask = storage.ref(`images/${image.name}`).put(image);

      (snapshot) => {
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
      () => {
          .then(url => {

              caption: caption,
              imageUrl: url,
              username: username

  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}>

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:


Let me know if theese lines of codes helped you.

Best regards,