Reactjs dropzone not uploading all dragged and dropped files to firebase firestore database in reactjs

Viewed 77

I created a dropzone in my reactjs website to allow users to drop files and theyll be uploaded immediately to my firebase firestore database as an array of urls and the files would be uploaded to a firebase storage folder.

It was working perfectly and there was no issues when i was testing the website multiple times, it was uploading all the images correctly into the firebase firestore collection in the specified field as an array of URLS.

Howver, now when after a few days i tested and the code is not functioning the way it is supposed to be. It is not uploading all dropped files into the firebase firestore collection field.

I do not understand why this is happening, and it used to log all the download urls in the developer console but not it only console logs only download url and either uploads one url or two.

Why is this happening?

Here is my code:

function EcommerceAddProduct() {
 const Dropzone = () => {
   
    const addProperty = () => {
      if (
        !propName ||
        !price ||
        !bedroom ||
        !bathroom ||
        !area ||
        !type ||
        !category ||
        !features ||
        !services
      ) {
        alert("Please Enter All Required Data");
      } else {
        firebase
          .firestore()
          .collection("Properties")
          .add({
            propname: propName,
            price: price,
            bedrooms: bedroom,
            bathroom: bathroom,
            exclusive: exclusive,
            area: area,
            type: type,
            category: category,
            features: features,
            services: services,
            summary: summary,
            // imageUrls: urls,
            location: location,
            salesAgentID: salesAgent,
            date: getCurrentDate(),
          })
          .then(result => {
            Promise.all(
              selectedImages.map(image => {
                const storageRef = storage.ref(
                  `propertyImages/${result.id}/${image.name}`
                );
                storageRef.put(image).then(urls => {
                  storageRef.getDownloadURL().then(async downloadUrls => {
                    console.log(downloadUrls);

                    await firebase
                      .firestore()
                      .collection("Properties")
                      .doc(result.id)
                      .update({
                        propertyID: result.id,
                        imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
                      })
                      .then(res => {
                        //handleUploadChange();
                        alert("Property Added Successfully");
                        window.location.reload();
                      });
                  });
                });
              })
            );
          });
      }
    };

 const onDrop = useCallback(acceptedFiles => {
      setSelectedImages(
        acceptedFiles.map(file =>
          Object.assign(file, {
            preview: URL.createObjectURL(file),
          })
        )
      );
    }, []);
    const { getRootProps, getInputProps } = useDropzone({ onDrop });
    const selected_image = selectedImages?.map((file, i) => (
      <div key={i}>
        <img src={file.preview} style={{ width: 250, height: 250 }} alt="" />
      </div>
    ));

 return (
 <div className="dropzone">
              <div>
                <div {...getRootProps()}>
                  <input {...getInputProps()} />

                  <div className="dz-message needsclick">
                    <div className="mb-3">
                      <i className="display-4 text-muted bx bxs-cloud-upload" />
                    </div>
                    <h4>Drop and Drag to Upload...</h4>
                  </div>
                </div>
                {selected_image}
              </div>
            </div>

)


  return (
    <Card>
      <CardBody>
        <CardTitle className="mb-3 h4">Property Images</CardTitle>

        <Dropzone />
      </CardBody>
    </Card>
  );
}
export default EcommerceAddProduct;
1 Answers

I have fixed the issue. I found that the problem was caused by the async downloadUrls and not adding an await to the Promise.All

Here is the code:

const addProperty = async () => {
      if (
        !propName ||
        !price ||
        !bedroom ||
        !bathroom ||
        !area ||
        !type ||
        !category ||
        !features ||
        !services
      ) {
        alert("Please Enter All Required Data");
      } else {
        await firebase
          .firestore()
          .collection("Properties")
          .add({
            propname: propName,
            price: price,
            bedrooms: bedroom,
            bathroom: bathroom,
            exclusive: exclusive,
            area: area,
            type: type,
            category: category,
            features: features,
            services: services,
            summary: summary,
            // imageUrls: urls,
            location: location,
            salesAgentID: salesAgent,
            date: getCurrentDate(),
          })
          .then(async (result) => {
            await Promise.all(
              selectedImages.map((image) => {
                const storageRef = storage.ref(
                  `propertyImages/${result.id}/${image.name}`
                );
                storageRef.put(image).then((urls) => {
                  console.log(urls);
                  storageRef.getDownloadURL().then( (downloadUrls) => {
                    console.log(downloadUrls);
                     firebase
                     .firestore()
                      .collection("Properties")
                      .doc(result.id)
                      .update({
                        propertyID: result.id,
                        imageUrls: firebase.firestore.FieldValue.arrayUnion(downloadUrls)
                      })
                      .then((res) => {
                        //handleUploadChange();
                        // alert("Property Added Successfully");
                        // window.location.reload();
                      });
                  });
                });
              })
            );
          });
      }
    };
Related