I have to do upload image in Reactjs and firebase storage. But after I run it, it shows for me like this error

This is my code for that src/firebase/firebase.js. Which the place I have to connect with my firebase

import firebase from 'firebase/app'
import 'firebase/storage'

var firebaseConfig = {
    apiKey: "AIzaSyDWZ8hH_r-thnYFhwYgBFbmIYaGid9ppOM",
    authDomain: "milkteashop-4565d.firebaseapp",
    databaseURL: ";,
    projectId: "milkteashop-4565d",
    storageBucket: "milkteashop-4565d.appspot",
    messagingSenderId: "211198335221",
    appId: "1:211198335221:web:05113e736a60861b100dbc",
    measurementId: "G-7CMBMYCJEG"
};

firebase.initializeApp(firebaseConfig);
const storage = firebase.storage()
export {
    storage, firebase as default
}
firebase.analytics();

In App.js i have to upload file image from my computer and store it on Firebase storage

import React, { useState } from 'react'
import { storage } from "./firebase/firebase"


function App() {
  const allInputs = { imgUrl: '' }
  const [imageAsFile, setImageAsFile] = useState('')
  const [imageAsUrl, setImageAsUrl] = useState(allInputs)

  console.log(imageAsFile)
  const handleImageAsFile = (e) => {
    const image = e.target.files[0]
    setImageAsFile(imageFile => (image))
  }

  const handleFireBaseUpload = e => {
    e.preventDefault()
    console.log('start of upload')
    if (imageAsFile === '') {
      console.error(`not an image, the image file is a ${typeof (imageAsFile)}`)
    }
    const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile)
    uploadTask.on('state_changed',
      (snapShot) => {
        console.log(snapShot)
      }, (err) => {
        //catches the errors
        console.log(err)
      }, () => {
        storage.ref('images').child(imageAsFile.name).getDownloadURL()
          .then(fireBaseUrl => {
            setImageAsUrl(prevObject => ({ ...prevObject, imgUrl: fireBaseUrl }))
          })
      })
  }


  const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile)
  uploadTask.on('state_changed',
    (snapShot) => {
      console.log(snapShot)
    }, (err) => {
      console.log(err)
    }, () => {
     
      storage.ref('images').child(imageAsFile.name).getDownloadURL()
        .then(fireBaseUrl => {
          setImageAsUrl(prevObject => ({ ...prevObject, imgUrl: fireBaseUrl }))
        })
    })

  return (
    <div className="App">
      <form onSubmit={handleFireBaseUpload}>
        <input
          type="file"
          onChange={handleImageAsFile}
        />

        <button>upload to firebase</button>
      </form>

      <img src={imageAsUrl.imgUrl} alt="image tag" />
    </div>
  );
}

export default App;

Can anyone help me what is problem? Thank you so much

I have to do upload image in Reactjs and firebase storage. But after I run it, it shows for me like this error

This is my code for that src/firebase/firebase.js. Which the place I have to connect with my firebase

import firebase from 'firebase/app'
import 'firebase/storage'

var firebaseConfig = {
    apiKey: "AIzaSyDWZ8hH_r-thnYFhwYgBFbmIYaGid9ppOM",
    authDomain: "milkteashop-4565d.firebaseapp.com",
    databaseURL: "https://milkteashop-4565d.firebaseio.com",
    projectId: "milkteashop-4565d",
    storageBucket: "milkteashop-4565d.appspot.com",
    messagingSenderId: "211198335221",
    appId: "1:211198335221:web:05113e736a60861b100dbc",
    measurementId: "G-7CMBMYCJEG"
};

firebase.initializeApp(firebaseConfig);
const storage = firebase.storage()
export {
    storage, firebase as default
}
firebase.analytics();

In App.js i have to upload file image from my computer and store it on Firebase storage

import React, { useState } from 'react'
import { storage } from "./firebase/firebase"


function App() {
  const allInputs = { imgUrl: '' }
  const [imageAsFile, setImageAsFile] = useState('')
  const [imageAsUrl, setImageAsUrl] = useState(allInputs)

  console.log(imageAsFile)
  const handleImageAsFile = (e) => {
    const image = e.target.files[0]
    setImageAsFile(imageFile => (image))
  }

  const handleFireBaseUpload = e => {
    e.preventDefault()
    console.log('start of upload')
    if (imageAsFile === '') {
      console.error(`not an image, the image file is a ${typeof (imageAsFile)}`)
    }
    const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile)
    uploadTask.on('state_changed',
      (snapShot) => {
        console.log(snapShot)
      }, (err) => {
        //catches the errors
        console.log(err)
      }, () => {
        storage.ref('images').child(imageAsFile.name).getDownloadURL()
          .then(fireBaseUrl => {
            setImageAsUrl(prevObject => ({ ...prevObject, imgUrl: fireBaseUrl }))
          })
      })
  }


  const uploadTask = storage.ref(`/images/${imageAsFile.name}`).put(imageAsFile)
  uploadTask.on('state_changed',
    (snapShot) => {
      console.log(snapShot)
    }, (err) => {
      console.log(err)
    }, () => {
     
      storage.ref('images').child(imageAsFile.name).getDownloadURL()
        .then(fireBaseUrl => {
          setImageAsUrl(prevObject => ({ ...prevObject, imgUrl: fireBaseUrl }))
        })
    })

  return (
    <div className="App">
      <form onSubmit={handleFireBaseUpload}>
        <input
          type="file"
          onChange={handleImageAsFile}
        />

        <button>upload to firebase</button>
      </form>

      <img src={imageAsUrl.imgUrl} alt="image tag" />
    </div>
  );
}

export default App;

Can anyone help me what is problem? Thank you so much

• javascript
• reactjs
• firebase
• firebase-storage
• firebase-analytics

• On Stack Overflow, don't share images of text. Copy the text into the question itself so that it's easy to read, copy, and search. – Doug Stevenson Commented Aug 10, 2020 at 15:25

1 Answer 1

You will have to add an import for each Firebase SDK you want to use. You didn't import anything for Analytics.

import firebase from 'firebase/app'
import 'firebase/storage'
import 'firebase/analytics'

See the documentation for more information.