在 React.js 中使用 Dropzone 时如何将图像上传到 Firebase 存储并获取图像的下载 URL

Question

I have a <Dropzone/> component in my react website that allows my users to upload multiple images just by either clicking or dragging and dropping.

When I upload the images they are being saved in my firebase storage but the URL's for each indiviual image are not being set and i get a firebase error that reads:

"Uncaught (in promise) FirebaseError: Firebase Storage: Object 'propertyImages/Picture1.png+4b80d-6dd0-4b40-cadc-8e7845677bbd' does not exist. (storage/object-not-found)
{
  "error": {
    "code": 404,
    "message": "Not Found."
  }
}"

I don't know why it isn't setting the url for each image, i believe it is because it is overwritting the previous download urls. How can i make Dropzone work properly?

What am I doing wrong?

Here is my code:

  import Dropzone, {useDropzone} from "react-dropzone"

  const [urls,setUrls] = useState([]);
  const { getRootProps, getInputProps, isDragActive } = useDropzone({ onDropAccepted: onFilesDrop, maxFiles: 5 });




  function onFilesDrop(files) {
    files.map((item, index) => {
        let uploadTask = storage.ref(`propertyImages/${item.name}+${uuid()}`).put(item);
        uploadTask.snapshot.ref.getDownloadURL().then(function (downloadURL) {
            setUrls(prevState => {
                return [...prevState, downloadURL]
            })
        })
    })
}
return (
  <CardTitle className="mb-3 h4">Property Images (MAX IMAGES 5)</CardTitle>
                    <div className="dropzone" >
                    <Dropzone
                        onDrop={acceptedFiles =>
                          onFilesDrop(acceptedFiles)
                        }
                      >
                        {({ getRootProps, getInputProps }) => (
                          <div>
                            <div
                              className="dz-message needsclick"
                              {...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 files here or click to upload.</h4>
                              </div>
                            </div>
                          </div>
                        )}
                      </Dropzone>
                      
)

Answer 1

update onFilesDrop function

function onFilesDrop(files) {
    files.map((item, index) => {
        let uploadTask = storage.ref(`propertyImages/${item.name}+${uuid()}`).put(item);
        console.log(uploadTask);
        uploadTask.on(
          "state_changed",
          snapshot => {
          },
          error => {
            console.log(error);
          },
          async () => {
            await storage
            .ref("images")
            .child(item.name)
            .getDownloadURL()
            .then(urls => {
              console.log(urls) //log url if you want
              setUrls((P) => [...P, urls]);
            })
          }
        )
      
    })