Encountering a bug when trying to store data into firestore

Question

I am trying to store data into my firestore using a form built with reactJS using semantic UI .. Upon submission of the form, the image file uploaded in the form is stored into the firebase storage, but the rest of the data inserted in the form is not added to the firestore collection.

Its like the program freezes after storing the image because it does not generate any bug or error .. It just shows an endless loading indicator which means it still processing the onSubmit function

You can test the form to see how it behaves on via this link: https://envy-hxxdini.firebaseapp.com/eventcreate

Here is my source code for the onSubmit function:

   const onSubmit = (e) => {
            e.preventDefault();
      if (eventImage) {
          setLoading(true);
          const uploadImage = storage.ref(`EventImages/${values.eventTitle}`)
          uploadImage.put(eventImage).then(() => {
              storage.ref('EventImages').child(values.eventName).getDownloadURL().then(url => {
                  dbref.add({
                    eventName: values.eventTitle,
                    eventCategory: values.eventCategory,
                    eventType: values.eventType,
                    eventOrganizer: values.eventOrganizer,
                    eventVenue: values.eventVenue,
                    eventStreet1: values.eventStreet1,
                    eventStreet2: values.eventStreet2,
                    eventPhone: values.eventPhone,
                    eventEmail: values.eventEmail,
                    eventDetails: values.eventDetails,
                    startDate: startDate,
                    startTime: startTime,
                    endDate: endDate,
                    endTime: endTime,
                    eventImgUrl: url,
                    public: state.public,
                    tickets: state.ticket
                  }).then((docRef) => {
                    console.log("Document written with ID: ", docRef.id);
                    setValues('');
                    setImage('');
                    setPrevUrl("");
                    setLoading(false);
                  }).catch((error) => {
                      console.error("Error adding document: ", error);
                  });
              })
          })

      }
            else {
        NotificationManager.error('Please an image is required', 'Close', 3000);
            }
    }

You can chain another .catch onto the `then` for `.then(url => {})` to see if it is throwing an error, but currently one not be caught. — Thingamajig, Oct 01 '19 at 08:13
"Firebase Storage: Invalid argument in `child` at index 0: Expected string." — Carl, Oct 01 '19 at 10:29

score 0 · Answer 1 · answered Oct 04 '19 at 14:38

@Carl I have tested the URL, and when submitting the form, using DevTools in Google Chrome troughs the follows:

code_: "storage/unauthorized", message_: "Firebase Storage: User does not have permission to access 'EventImages/Test '.", serverResponse_: "{↵ "error": {↵ "code": 403,↵ "message": "Pe…n denied. Could not perform this operation"↵ }↵}", name_: "FirebaseError"}

For this error (Firebase 403) see the following question

In addition, in the console, there are some advices:

! The timestampsInSnapshots setting now defaults to true and you no longer need to explicitly set it. In a future release, the setting will be removed entirely and so it is recommended that you remove it from your firestore.settings() call now.

index.cjs.js:40 It looks like you're using the development build of the Firebase JS SDK. When deploying Firebase apps to production, it is advisable to only import the individual SDK components you intend to use. For the module builds, these are available in the following manner (replace with the name of a component - i.e. auth, database, etc)

CommonJS Modules:

const firebase = require('firebase/app'); require('firebase/<PACKAGE>');

ES Modules:

import firebase from 'firebase/app'; import 'firebase/<PACKAGE>';

Typescript:

import * as firebase from 'firebase/app'; import 'firebase/<PACKAGE>';

Encountering a bug when trying to store data into firestore

1 Answers1