Add array of images to Firebase storage and realtime database using React JS

Question

I am trying to push an array of local images to Firebase store and my database. The images are being outputted in my database json scheme but nothing is showing up in storage and keep receveing the following errors below. Any thoughts?

Error:

Database JSON scheme:

{
  "users" : {
    "XhLxS1KUS8UyHjsuHYrEuyipQX53" : {
      "Email" : "ssssss@gmail.com",
      "code" : "bob",
      "image1" : {
        "id" : "223d7f60-331b-11e9-b680-6b36b34d4cc6",
        "url" : "holder1.png"
      },
      "image2" : {
        "id" : "223da670-331b-11e9-b680-6b36b34d4cc6",
        "url" : "holder2.png"
      },
      "image3" : {
        "id" : "223da671-331b-11e9-b680-6b36b34d4cc6",
        "url" : "holder3.png"
      },
      "location" : "fl"
    }
  }
}

React JS:

const images = [
  {
    id: uuid(),
    url: `holder1.png`
  },
  {
    id: uuid(),
    url: `holder2.png`
  },
  {
    id: uuid(),
    url: `holder3.png`
  }
];


class Register extends Component {
  state = {
    email: '',
    password: '',
    code: 'bob',
    location: 'fl',
    image: null,
    url: '',
    error: null,
    arr: images,
  };


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

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

  handleSubmit = (event) => {
    event.preventDefault();
    const { email, password, image, url } = this.state;

    const storageRef = storage.ref(`images/`);
    this.state.image.map((file, index) => {
      storageRef
        .child(`${file.url}`)
        .getDownloadURL().then(url => {
          this.setState({ url }); <---Should I set state?
        })
    });

    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,
          image1:  images[0],
          image2:  images[1],
          image3:  images[2]
        })
        //console.log(this.state.url)
        this.props.history.push('/');
      })
      .catch((error) => {
        this.setState({ error: error });
      });
  };
....

This works for a single image to storage:

React JS:

class Register extends Component {
  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, url } = this.state;
    const uploadTask = storage.ref(`images/${image.name}`).put(image);

    uploadTask.on('state_changed', () => {
      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 });
      });
  };
...

Answer 1

As I commented on your previous question:

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.

In addition, as far as I can see from the documentation, there are three callbacks for UploadTask.on('state_changed' and the third is called when the upload is completed.

So:

uploadTask.on('state_changed', function(snapshot) {
  // handle progress messages here
},(error) => {
  // handle errors here
},() => {
  storage.ref('images').child(image.name).getDownloadURL().then(url => {
      console.log(url);
      this.setState({url});
      firebase.database().ref('users/' + user.user.uid + '/image').set(url);
  })
});