Error: Reference.child failed: First argument was an invalid path Paths must be non-empty strings and can’t contain ".", "#", "$", "[", or "]"

i am trying to display and image on a chat web app i am making. the file (image) is being uploaded to firebase storage but its not displaying. the function to display message is working well with regular text but for some reason the image isn't. when it's done uploading i can get the downloadUrl but its not displaying. i have three files messageForm, FileModal here is the code for FileModal

    addFile = event => {
    const file = event.target.files[0];
    if (file) {
        this.setState({ file });
    }
}

sendFile = () => {
    const { file } = this.state;
    const { uploadFile, closeModal } = this.props;

    if (file !== null) {
        if (this.isAuthorized(file.name)) {
            const metadata = { contentType: mime.lookup(file.name) };
            uploadFile(file, metadata);
            closeModal();
            this.clearFile();
        }
    }
}

isAuthorized = filename => this.state.authorized.includes(mime.lookup(filename));

clearFile = () => this.setState({ file: null })
render() {
    const { modal, closeModal } = this.props;
    return (
        <Modal basic open={modal} onClose={closeModal}>
            <Modal.Header>Select an image file</Modal.Header>
            <Modal.Content>
                <Input
                    fluid
                    label="file Types: JPG, PNG"
                    onChange={this.addFile}
                    name="file"
                    type="file"
                />
            </Modal.Content>
            <Modal.Actions>
                <Button
                    color="green"
                    inverted
                    onClick={this.sendFile}
                >
                    <Icon name={"checkmark"} /> Send
                </Button>
                <Button
                    color="red"
                    inverted
                    onClick={closeModal}
                >
                    <Icon name={"remove"} /> Cancel
                </Button>
            </Modal.Actions>
        </Modal>
    );
}}

here's the code for messageForm

    uploadFile = (file, metadata) => {
const pathToUpload = this.state.channel.id;
const ref = this.props.messagesRef;
const filePath = `chat/public/${file.name}`;

this.setState({
  uploadState: 'uploading',
  uploadTask: this.state.storageRef.child(filePath).put(file, metadata)
},
  () =>{
    // progesss function
    this.state.uploadTask.on('state_changed', snap => {
      const percentUploaded = Math.round((snap.bytesTransferred / snap.totalBytes) * 100)
      this.setState({ percentUploaded })
    },
      err => {
        //error function
        console.error(err);
        this.setState({
          errors: this.state.errors.concat(err),
          uploadState: 'error',
          uploadTask: null
        })
      },
      () => {
        // on complete upload function, that is waht to do when it has upload to the database  
        this.state.uploadTask.snapshot.ref.getDownloadURL().then(downloadUrl => {
          console.log(downloadUrl);
          this.sendFileMessage(downloadUrl, ref, filePath)
        })
        .catch(err => {
          console.error(err);
          this.setState({
            errors: this.state.errors.concat(err),
            uploadState: 'error',
            uploadTask: null
          })
        })
      }
    )
}

) }

    sendFileMessage = (fileUrl, ref, pathToUpload) => {
ref
  .child(pathToUpload)
  .push()
  .set(this.createMessage(fileUrl))
  .then(() => {
    this.setState({ uploadState: "done" });
  })
  .catch(err => {
    console.error(err);
    this.setState({
      errors: this.state.errors.concat(err)
    });
  });

};



Read more here: https://stackoverflow.com/questions/64626582/error-reference-child-failed-first-argument-was-an-invalid-path-paths-must-be

Content Attribution

This content was originally published by Atogwet at Recent Questions - Stack Overflow, and is syndicated here via their RSS feed. You can read the original post over there.

%d bloggers like this: