admin管理员组文章数量:1023815
I am new to learning to react js with firebase storage. I am trying to upload multiple images in firebase v9. I have successfully done uploading a single image but am not able to do multiple images. I have watched tutorials but those are not updated.
Also after uploading all the images I want all the URLs in an array because I need to send it also in the backend.
const [progress, setProgress] = useState(0);
const [selectedImages, setSelectedImages] = useState([]);
const onSelectFileUpload = (e) => {
e.preventDefault();
const file = e.target[0].files[0];
uploadFiles(file);
};
const uploadFiles = (file) => {
//
if (!file) return;
const sotrageRef = ref(storage, `files/${file.name}`);
const uploadTask = uploadBytesResumable(sotrageRef, file);
uploadTask.on(
"state_changed",
(snapshot) => {
const prog = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(prog);
},
(error) => console.log(error),
() => {
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
console.log("File available at", downloadURL);
});
}
);
};
HTML code:
<form onSubmit={onSelectFileUpload}>
<div className="shadow sm:rounded-md sm:overflow-hidden bg-white px-4 py-5 bg-white space-y-6 sm:p-6">
<input
type="file"
name="images"
multiple
accept="image/png , image/jpeg, image/webp"
/>
<div className=" py-3 text-right ">
<button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button>
</div>
</div>
</form>
Can anyone guide me on how can I solve it?
I am new to learning to react js with firebase storage. I am trying to upload multiple images in firebase v9. I have successfully done uploading a single image but am not able to do multiple images. I have watched tutorials but those are not updated.
Also after uploading all the images I want all the URLs in an array because I need to send it also in the backend.
const [progress, setProgress] = useState(0);
const [selectedImages, setSelectedImages] = useState([]);
const onSelectFileUpload = (e) => {
e.preventDefault();
const file = e.target[0].files[0];
uploadFiles(file);
};
const uploadFiles = (file) => {
//
if (!file) return;
const sotrageRef = ref(storage, `files/${file.name}`);
const uploadTask = uploadBytesResumable(sotrageRef, file);
uploadTask.on(
"state_changed",
(snapshot) => {
const prog = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(prog);
},
(error) => console.log(error),
() => {
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
console.log("File available at", downloadURL);
});
}
);
};
HTML code:
<form onSubmit={onSelectFileUpload}>
<div className="shadow sm:rounded-md sm:overflow-hidden bg-white px-4 py-5 bg-white space-y-6 sm:p-6">
<input
type="file"
name="images"
multiple
accept="image/png , image/jpeg, image/webp"
/>
<div className=" py-3 text-right ">
<button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button>
</div>
</div>
</form>
Can anyone guide me on how can I solve it?
Share Improve this question edited Feb 17, 2022 at 7:38 Dharmaraj 51.1k8 gold badges67 silver badges98 bronze badges asked Feb 17, 2022 at 6:12 JerinJerin 7363 gold badges16 silver badges39 bronze badges2 Answers
Reset to default 3import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
import { storage } from "../../firebase";
async function uploadImage(image) {
const storageRef = ref(storage, `/posts/${Date.now()}-${image.name}`);
const response = await uploadBytes(storageRef, image);
const url = await getDownloadURL(response.ref);
return url;
}
export default async function uploadImages(images) {
const imagePromises = Array.from(images, (image) => uploadImage(image));
const imageRes = await Promise.all(imagePromises);
return imageRes; // list of url like ["https://..", ...]
}
Solved
const uploadFiles = (files) => {
const promises = []
files.map((file) => {
console.log('loop');
const sotrageRef = ref(storage, `files/${file.name}`);
const uploadTask = uploadBytesResumable(sotrageRef, file);
promises.push(uploadTask)
uploadTask.on(
"state_changed",
(snapshot) => {
const prog = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(prog);
},
(error) => console.log(error),
async () => {
await getDownloadURL(uploadTask.snapshot.ref).then((downloadURLs) => {
setURLs(prevState => [...prevState, downloadURLs])
console.log("File available at", downloadURLs);
});
}
);
})
Promise.all(promises)
.then(() => alert('All images uploaded'))
.then(err => console.log(err))
};
console.log(selectedImages);
console.log(URLs);
const handleSubmit = () => { uploadFiles(images); }
I am new to learning to react js with firebase storage. I am trying to upload multiple images in firebase v9. I have successfully done uploading a single image but am not able to do multiple images. I have watched tutorials but those are not updated.
Also after uploading all the images I want all the URLs in an array because I need to send it also in the backend.
const [progress, setProgress] = useState(0);
const [selectedImages, setSelectedImages] = useState([]);
const onSelectFileUpload = (e) => {
e.preventDefault();
const file = e.target[0].files[0];
uploadFiles(file);
};
const uploadFiles = (file) => {
//
if (!file) return;
const sotrageRef = ref(storage, `files/${file.name}`);
const uploadTask = uploadBytesResumable(sotrageRef, file);
uploadTask.on(
"state_changed",
(snapshot) => {
const prog = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(prog);
},
(error) => console.log(error),
() => {
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
console.log("File available at", downloadURL);
});
}
);
};
HTML code:
<form onSubmit={onSelectFileUpload}>
<div className="shadow sm:rounded-md sm:overflow-hidden bg-white px-4 py-5 bg-white space-y-6 sm:p-6">
<input
type="file"
name="images"
multiple
accept="image/png , image/jpeg, image/webp"
/>
<div className=" py-3 text-right ">
<button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button>
</div>
</div>
</form>
Can anyone guide me on how can I solve it?
I am new to learning to react js with firebase storage. I am trying to upload multiple images in firebase v9. I have successfully done uploading a single image but am not able to do multiple images. I have watched tutorials but those are not updated.
Also after uploading all the images I want all the URLs in an array because I need to send it also in the backend.
const [progress, setProgress] = useState(0);
const [selectedImages, setSelectedImages] = useState([]);
const onSelectFileUpload = (e) => {
e.preventDefault();
const file = e.target[0].files[0];
uploadFiles(file);
};
const uploadFiles = (file) => {
//
if (!file) return;
const sotrageRef = ref(storage, `files/${file.name}`);
const uploadTask = uploadBytesResumable(sotrageRef, file);
uploadTask.on(
"state_changed",
(snapshot) => {
const prog = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(prog);
},
(error) => console.log(error),
() => {
getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
console.log("File available at", downloadURL);
});
}
);
};
HTML code:
<form onSubmit={onSelectFileUpload}>
<div className="shadow sm:rounded-md sm:overflow-hidden bg-white px-4 py-5 bg-white space-y-6 sm:p-6">
<input
type="file"
name="images"
multiple
accept="image/png , image/jpeg, image/webp"
/>
<div className=" py-3 text-right ">
<button type="submit" className="inline-flex justify-center py-2 px-4 border border-transparent drop-shadow-md text-sm font-medium rounded-md text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">Publish</button>
</div>
</div>
</form>
Can anyone guide me on how can I solve it?
Share Improve this question edited Feb 17, 2022 at 7:38 Dharmaraj 51.1k8 gold badges67 silver badges98 bronze badges asked Feb 17, 2022 at 6:12 JerinJerin 7363 gold badges16 silver badges39 bronze badges2 Answers
Reset to default 3import { getDownloadURL, ref, uploadBytes } from "firebase/storage";
import { storage } from "../../firebase";
async function uploadImage(image) {
const storageRef = ref(storage, `/posts/${Date.now()}-${image.name}`);
const response = await uploadBytes(storageRef, image);
const url = await getDownloadURL(response.ref);
return url;
}
export default async function uploadImages(images) {
const imagePromises = Array.from(images, (image) => uploadImage(image));
const imageRes = await Promise.all(imagePromises);
return imageRes; // list of url like ["https://..", ...]
}
Solved
const uploadFiles = (files) => {
const promises = []
files.map((file) => {
console.log('loop');
const sotrageRef = ref(storage, `files/${file.name}`);
const uploadTask = uploadBytesResumable(sotrageRef, file);
promises.push(uploadTask)
uploadTask.on(
"state_changed",
(snapshot) => {
const prog = Math.round(
(snapshot.bytesTransferred / snapshot.totalBytes) * 100
);
setProgress(prog);
},
(error) => console.log(error),
async () => {
await getDownloadURL(uploadTask.snapshot.ref).then((downloadURLs) => {
setURLs(prevState => [...prevState, downloadURLs])
console.log("File available at", downloadURLs);
});
}
);
})
Promise.all(promises)
.then(() => alert('All images uploaded'))
.then(err => console.log(err))
};
console.log(selectedImages);
console.log(URLs);
const handleSubmit = () => { uploadFiles(images); }
本文标签： javascriptHow can I upload multiple images in firebase v9 cloud storage using reactjsStack Overflow
版权声明：本文标题：javascript - How can I upload multiple images in firebase v9 cloud storage using reactjs - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://it.en369.cn/questions/1745599073a2158346.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论