I’m trying to upload the image in the firebase. But the problem is uploading the image and sending the data to the backend without waiting for it to finish.
I think await function is not working
if(imageUpload){
await uploadFile();
console.log(url)
}
export default function Postcreate() {
const imgFileRef = useRef();
const navigate = useNavigate()
const [topic,setTopic] = useState("")
const [body,setBody] = useState("")
const [imageUpload, setImageUpload] = useState("");
const [url,setUrl] = useState("")
const [topicdata , setTopicData] = useState([]);
const uploadFile = async () => {
if (imageUpload == null) return;
try{
const imageRef = ref(storage, `posts/${imageUpload.name + v4()}`);
await uploadBytes(imageRef, imageUpload).then((snapshot) => {
getDownloadURL(snapshot.ref).then((imageurl) => {
console.log(imageurl) //test
setUrl(imageurl)
});
});
}catch(err){
console.log("imageUpload -", err);
}
};
const PostCreateData = async () =>{
if(imageUpload){
await uploadFile();
console.log(url)
}
if(!topic || !body || !url){
document.getElementById("createPost-alert").style.display = "flex";
document.getElementById("createPost-alert").innerHTML = "Please fill all the field!";
return
}
fetch("/createpost",{
method:"post",
headers:{
"Content-Type":"application/json",
"Authorization":"Bearer " + localStorage.getItem("jwt")
},
body:JSON.stringify({
topic,
body,
url
})
}).then(res=>res.json())
.then(data => {
if(data.error){
document.getElementById("createPost-alert").style.display = "flex";
document.getElementById("createPost-alert").innerHTML = data.error;
}
else{
toast.success(data.message,{
hideProgressBar: true,
closeOnClick: true,
pauseOnHover: true,
draggable: true,
progress: undefined,
});
setTimeout(function(){
// window.location.replace('/');
},1000);
}
}).catch((err)=>{
console.log("Error - ", err)
})
}
return (
<div>
{/* //For Tost Messages */}
<ToastContainer />
<div>
<div class="card shadow-sm p-2 mb-5 bg-white rounded">
<div>
{/* //Create Drop Down using topic Tabale in DB */}
<select
class="form-select mb-2 "
name="topic"
value={topic}
onChange={(e) => setTopic(e.target.value)}
>
<option key="" value="" selected disabled hidden>Select Topic</option>
{topicdata.map(topicItem=>{
return(
<option key={topicItem.topic} value={topicItem.topic}>{topicItem.topic}</option>
)
})}
</select>
<textarea class="min-vh-15 mb-2 resize-none post-create-textarea"
name="w3review"
placeholder="Say Something..."
value={body}
onChange={(e) => setBody(e.target.value)}
required
></textarea>
{/* Alert */}
<div class="text-danger mb-1" id="createPost-alert" role="alert"></div>
<div className="d-flex flex-row justify-content-between">
<input
ref={imgFileRef}
className="d-none"
type="file"
onChange={(event) => {
setImageUpload(event.target.files[0]);
}}
/>
<button
onClick={() => imgFileRef.current.click()}
type="button"
class="btn btn-outline-dark ImageUpload-btn">
<i class="fa-light fa-folder-image"></i>
Add Image
</button>
<div className="d-flex flex-row justify-content-end">
<button type="button"
class="btn btn-primary post-btn"
onClick={() => PostCreateData() }
>Post</button>
</div>
</div>
</div>
</div>
</div>
</div>
)
}
