CODEWITHSUNDEEP
javascriptreactjsfirebasefirebase-realtime-database
Amir Rezazadeh
Amir Rezazadeh

Reputation: 35

Unhandled Rejection (TypeError): observer.complete.bind is not a function

its mostly like instagram, when a user try to upload a post so im trying to upload an image to firebase, but this error appears when upload finished.

Unhandled Rejection (TypeError): observer.complete.bind is not a function

image uploaded successfuly, but it do not shows in app (seems like the problem is with that link firebase gives you back)

ImageUpload.js :

import { Button } from "@material-ui/core";
import React, { useState } from "react";
import { db, storage } from "../database/firebase";
import firebase from "firebase";

function ImageUpload({ nickname }) {
  // States
  const [caption, setCaption] = useState("");
  const [image, setImage] = useState(null);
  const [progress, setProgress] = useState(0);

  // Handlers
  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(
      firebase.storage.TaskEvent.STATE_CHANGED,
      (snapshot) => {
        // Progress function...
        const progress = Math.round(
          (snapshot.bytesTransferred / snapshot.totalBytes) * 100
        );
        setProgress(progress);
      },
      (error) => {
        // Error function...
        console.log(error);
      },
      // Complete function...
      storage
        .ref("images")
        .child(image.name)
        .getDownloadURL()
        .then((url) => {
          // Post image inside db
          db.collection("posts").add({
            timestamp: firebase.firestore.FieldValue.serverTimestamp(),
            caption: caption,
            imageURL: url,
            username: nickname,
          });
          setProgress(0);
          setCaption("");
          setImage(null);
        })
    );
  };

  return (
    <div>
      <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;

Upvotes: 2

Views: 464

Answers (1)

samthecodingman
samthecodingman

Reputation: 26171

For your "complete function", you are accidentally passing in the Promise from storageRef.ref("images").child(image.name).getDownloadURL() instead of a function.

To fix it, make sure you are passing in a function by changing

// Complete function...
storage

to

// Complete function...
() => storage

Upvotes: 2

Related Questions