Reactjs dropzone 没有将所有拖放的文件上传到 reactjs 中的 firebase firestore 数据库

Question

我在我的 reactjs 网站上创建了一个 dropzone 以允许用户放置文件，它们将作为 urls 的数组立即上传到我的 firebase firestore 数据库，并且文件将上传到 firebase 存储文件夹.

它运行完美，当我多次测试该网站时没有任何问题，它正在将所有图像作为 URLS 数组正确上传到指定字段中的 firebase firestore 集合中。

但是，几天后我测试了代码，发现代码没有按预期运行。它没有将所有删除的文件上传到 firebase firestore 收集字段。

我不明白为什么会这样，它曾经在开发者控制台中记录所有下载 url 但它不仅控制台记录只下载 url 并且上传一个 url 或两个。

为什么会这样？

这是我的代码：

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;

Answer 1

我已经解决了这个问题。我发现问题是由 async downloadUrls 而不是向 Promise.All

添加 await 引起的

代码如下：

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();
                      });
                  });
                });
              })
            );
          });
      }
    };

Reactjs dropzone 没有将所有拖放的文件上传到 reactjs 中的 firebase firestore 数据库

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

javascript

firebase

dropzone.js

reactjs

google-cloud-firestore