1

Is it possible to upload image to a user in your database and not storage. I am currently building out a registration and allowing the ability to add images to a profile and store those images in your UID. Currently all the data saves, expect the image or image url. Any thoughts of how to approach or if this is the correct way to go about this?

My JSON scheme in my database:

    {
  "users" : {
    "3pwcQ0VuzogVmmQ97yDExkMac1m1" : {
      "Email" : "greg@gmail.com",
      "code" : "bob",
      "image" : "",
      "location" : "fl"
    }
  }
}

React JS:

    state = {
    email: '',
    password: '',
    code: 'bob',
    location: 'fl',
    image: null,
    url: '',
    error: null,
  };


  handleInputChange = e => {
    this.setState({ [e.target.name]: e.target.value });
  };

  handleChange = e => {
    if (e.target.files[0]) {
      const image = e.target.files[0];
      this.setState(() => ({image}));
    }
  }

  handleSubmit = (event) => {
    event.preventDefault();
    const { email, password, image } = this.state;
    const uploadTask = storage.ref(`images/${image.name}`).put(image);

    uploadTask.on('state_changed', () => {
      // complete function ....
      storage.ref('images').child(image.name).getDownloadURL().then(url => {
          console.log(url);
          this.setState({url});
      })
    });

    firebase
      .auth()
      .createUserWithEmailAndPassword(email, password)
      .then((user) => {
        firebase
        .database()
        .ref('users/' + user.user.uid)
        .set({
          Email: user.user.email,
          code:  this.state.code,
          location:  this.state.location,
          image:  this.state.url
        })
        this.props.history.push('/');
      })
      .catch((error) => {
        this.setState({ error: error });
      });
  };
user992731
  • 3,400
  • 9
  • 53
  • 83
  • The "correct" way to store image data is in Firestore Storage. If you want to upload an image to the Firebase Realtime Database after all, you will need to encode the image data as a base64 string. See https://stackoverflow.com/questions/13955813/how-to-store-and-view-images-on-firebase – Frank van Puffelen Feb 17 '19 at 18:06
  • How do you assign the image uploaded to the uid? – user992731 Feb 17 '19 at 18:09
  • To associate in image from Firebase Storage with a user profile in the Firebase Realtime Database, you'll typically store the image's download URL or path in the user's profile. Since both the path and the URL are strings, they can be stored in the database (which only supports JSON types). – Frank van Puffelen Feb 17 '19 at 18:43
  • @FrankvanPuffelen - I just updated my question. I am able to save to storage now but getting null in my database. Any thoughts? – user992731 Feb 17 '19 at 19:09
  • You need to write the URL to the database from within the callback to `getDownloadUrl()`. So where you now call `this.setState({url});`, call something like `firebase.database().ref('users/' + user.user.uid + '/image').set(url);` too. – Frank van Puffelen Feb 18 '19 at 00:59
  • Thanks @FrankvanPuffelen - I worked through it. Only on my 2nd day using Firebase :) – user992731 Feb 19 '19 at 04:44

1 Answers1

1

I think you should use firebase storage. That way you will be able to store the actual image.

Check this link: https://firebase.google.com/docs/storage/

yonBav
  • 1,695
  • 2
  • 17
  • 31