0
votes

I have an application that invites users to upload image files, which I then intend to store using Firebase's Cloud Storage. I've gotten pretty far using the Firebase docs, but I keep getting a 400 response when I try to upload the files.

Here is the component from which users upload their files:

class JobEntry extends Component { 
    constructor(props) {
      super(props);
    }

    render() {
      return (
        <div className="single-job-entry">
            <div className="job-item">
              <span className="job-item-label">Add doc?:</span>
              <input type="file"  
                id={this.props.id +"file"} 
                data-id={this.props.id} 
                onChange={this.props.submitDoc} />
            </div>
      </div>
      );
    }
  }

  export default JobEntry;

And here is the function that uploads the files to Firebase ('storage' and 'resumes' are firebase storage refs):

  submitDoc (e) {
    let jobId = e.target.dataset.id
    let id = this.props.userId
    let file = document.getElementById(jobId + 'file').files[0]

    var newPath = storage.resumes.child(jobId + '/' + file.name)

    newPath.put(file).then(snapshot => {
      console.log('Uploaded file')
    }).catch(err => {
      console.log(err.message)
    })

  }

Every time I try to upload a files, I get this error:

Firebase Storage: An unknown error occurred, please check the error payload for server response.

I've checked the server response and there's nothing there that seems to point to the problem.

Any help is appreciated!

1
If you manually add a file to storage, are you able to download it? The error isn't very specific so I'm trying to guess. Also, I would try to use storage.child(...) without .resumesRodrigo Mata

1 Answers

0
votes

It turns out I had to activate storage within the Firebase UI before I could interact with via Node. Derp. Good to know though if you're starting to work with Firebase. Couldn't find any mention of it in their documentation.