I have the following, where I am trying to change the body style while the image is uploading (so the user knows it is uploading). How can I attach a class to the body while the image is uploading and then remove it once the image has uploaded?
const [uploadingImage, setUploadingImage] = useState(false)
const uploadToFirebase = e => {
e.preventDefault();
if (image) {
const storageRef = storage.ref(`${user1}/${tripid}/documents`);
const imageRef = storageRef.child(image.name);
setUploadingImage(true)
imageRef.put(image)
.then((url) => {
alert("Successfully uploaded.");
getFromFirebase();
setUploadingImage(false)
})
.catch(e => setUploadingImage(false));
} else {
alert("Please upload an image first.");
}
};
You could use an useEffect, something like this:
useEffect(()=>{
document.body.classList.toggle("image-uploading", uploadingImage);
},[uploadingImage])
Then add this in your css:
body.image-uploading{
/* whatever style you want goes here*/
}