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