title: Add array of images to Firebase storage and realtime database using React JS
body: <p>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?</p>
  
  <p>Error:
  <a href="https://i.stack.imgur.com/IOJzb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/IOJzb.png" alt="enter image description here"></a></p>
  
  <p>Database JSON scheme:</p>
  
  <pre><code>{
    "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"
      }
    }
  }
  </code></pre>
  
  <p>React JS:</p>
  
  <pre><code>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 =&gt; {
      this.setState({ [e.target.name]: e.target.value });
    };
  
    handleChange = e =&gt; {
      if (e.target.files[0]) {
        const image = this.state.arr;
        this.setState(() =&gt; ({ image }));
        console.log(image)
      }
    }
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      const { email, password, image, url } = this.state;
  
      const storageRef = storage.ref(`images/`);
      this.state.image.map((file, index) =&gt; {
        storageRef
          .child(`${file.url}`)
          .getDownloadURL().then(url =&gt; {
            this.setState({ url }); &lt;---Should I set state?
          })
      });
  
      firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then((user) =&gt; {
          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) =&gt; {
          this.setState({ error: error });
        });
    };
  ....
  </code></pre>
  
  <p>This works for a single image to storage:</p>
  
  <p>React JS:</p>
  
  <pre><code>class Register extends Component {
    state = {
      email: '',
      password: '',
      code: 'bob',
      location: 'fl',
      image: null,
      url: '',
      error: null,
    };
  
  
    handleInputChange = e =&gt; {
      this.setState({ [e.target.name]: e.target.value });
    };
  
    handleChange = e =&gt; {
      if (e.target.files[0]) {
        const image = e.target.files[0];
        this.setState(() =&gt; ({image}));
      }
    }
  
    handleSubmit = (event) =&gt; {
      event.preventDefault();
      const { email, password, image, url } = this.state;
      const uploadTask = storage.ref(`images/${image.name}`).put(image);
  
      uploadTask.on('state_changed', () =&gt; {
        storage.ref('images').child(image.name).getDownloadURL().then(url =&gt; {
            console.log(url);
            this.setState({url});
        })
      });
  
      firebase
        .auth()
        .createUserWithEmailAndPassword(email, password)
        .then((user) =&gt; {
          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) =&gt; {
          this.setState({ error: error });
        });
    };
  ...
  </code></pre>