CODEWITHSUNDEEP
reactjsfirebasereact-redux-firebase
bafix2203
bafix2203

Reputation: 541

add file from state to firestore collection Firestore Firebase ReactJs

I have Action component, where I am adding new projects to firestore.collection 

 export const createProject = (project) => {
      return (dispatch, getState, { getFirebase, getFirestore }) => {

            const firestore = getFirestore();

            firestore.collection('projects').add({
                ...project

            }).then(() => {
                dispatch({})
            }).catch((err) => {
                dispatch({});
            })
        }
    };

And I have component: 

state = {
      title: '',
      content: '',
      file: ''
    }
    handleChange = (e) => {
        this.setState({
            [e.target.id] : e.target.value
        })
    }
    handleOnFileChange = (e) => {
        let file = e.target.files[0];
        this.setState({
            [e.target.id] : file
        })
    }
    handleSubmit = (e) => {
       e.preventDefault();
       console.log(this.state)
    }



    <form onSubmit={this.handleSubmit}>

       <input type="text" id="title" onChange={this.handleOnFileChange}/>

       <textarea id="content" onChange={this.handleChange}></textarea>

       <input type="file" id="file" onChange={this.handleChange}/>

    </form>

const mapDispatchToProps = (dispatch) => {
    return {
        createProject: (project) => dispatch(createProject(project)) 
    }
}

And after submit I am getting this error : × "FirebaseError: Function DocumentReference.set() called with invalid data. Unsupported field value: a custom File object (found in field file)"

if I delete file from state, and try to add that state, without file, everything works fine, and my projects are adding to firestore.collection, but i need to add to firestore.collection everything from state (title, content and file)

Upvotes: 1

Views: 539

Answers (1)

Renaud Tarnec
Renaud Tarnec

Reputation: 83163

If I am not mistaking, this is because you try to save to Firestore an object of type File which is not supported. See here the supported data types https://firebase.google.com/docs/firestore/manage-data/data-types.

So, either you use a property (or several properties) of the File object, like, for example, the name, the size or the type.

or you modify your code to save the file to Cloud Storage for Firebase which is the dedicated Firebase service for storing and serving files, see https://firebase.google.com/docs/storage/

It all depends on your exact need: saving the file or only some of its properties.

Upvotes: 1

Related Questions