Uploading a file in React redux firebase

Question

I'm trying to upload a file to firebase storage but i keep getting this error:

Error: Firebase storage is required to upload files
    at Object.uploadFile (storage.js:63)
    at Object.uploadFile (createFirebaseInstance.js:139)
    at classActions.js:11

This is the call:

export const createClass  = (_class) => {
    return (dispatch, getState, {getFirebase, getFirestore}) => {
        // Call to DB
        const firestore = getFirestore();
        const firebase = getFirebase();
        firestore.collection('classes').add({
            ..._class,
            createdAt: new Date()
        }).then(() => {
            console.log(_class.image);
            firebase.uploadFile('imgs', _class.image);
        }).then ( () => {
            dispatch({
                type: 'ADD_CLASS',
                class: _class
            })
        }).catch( (err) => {
            dispatch({
                type: 'ADD_CLASS_ERROR',
                error: err
            });
        });
    }    
};

I know that the image is not void,and the rules for storage in the firebase console are set to public. Also, the folder already exists, just in case.

handleChangeImage = (e) => {
    this.setState({
      image: e.target.files[0]
    });
  }


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

I can't figure out what I could be doing wrong.

Pierre V. · Accepted Answer · 2019-08-17 18:44:03Z

3

I assume you are using react-redux-firebase.

You probably have forgotten to import firebase/storage. If you intend to use Firebase storage when using react-redux-firebase, you need to import the storage part of the library explicitly:

import 'firebase/storage'

answered Aug 17, 2019 at 18:44

Pierre V.

1,6151 gold badge11 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pierre V. Over a year ago

You're welcome! Have a look at the react-redux-firebase doc. Firebase isn't imported as a whole, some parts components (such as storage) are optional.

Collectives™ on Stack Overflow

Uploading a file in React redux firebase

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related