I am working on vote-form. When I am creating a vote and sending video with formData using reactjs it gets submitted successfully but in response videoUrl is null. Now when I click on edit the same vote, getVoteById api is called and in response I can see the videoUrl is present and also prepopulate the video which proves that yes video is getting saved. But the main problem starts here is Now when I update the vote it gets saved successfully but again videoUrl is null and at this time when I click on edit, at this time my videoUrl is empty and preview is also not showing.
Note: At every stage video hasn’t been changed…
This is how I am handling the submit:
const handleSubmit = async (e, activeStatus = formData.isActive) => {
if (e) e.preventDefault();
// Validate required fields
if (!formData.title.trim()) {
toast.error("Title is required");
return;
}
if (!formData.description.trim()) {
toast.error("Description is required");
return;
}
if (!questionType.trim()) {
toast.error("Option type is required");
return;
}
if (!priority) {
toast.error("Set Priority is required");
return;
}
const userId = Cookies.get("userId");
const token = Cookies.get("token");
if (!userId || !token) {
toast.error("Missing credentials");
return;
}
const dataToSubmit = new FormData();
dataToSubmit.append("UserId", userId);
dataToSubmit.append("Title", formData.title);
dataToSubmit.append("Description", formData.description);
dataToSubmit.append("OptionType", questionType);
// dataToSubmit.append("isActive", formData.isActive);
dataToSubmit.append("isActive", activeStatus);
dataToSubmit.append("Priority", formData.priority);
let optionsArray = [];
if (questionType === "custom options") {
optionsArray = mcqOptions.filter((opt) => opt.trim() !== "");
} else if (questionType === "Yes/No") {
optionsArray = ["Yes", "No", "I don't know"];
} else if (questionType === "True/False") {
optionsArray = ["True", "False", "I don't know"];
}
optionsArray.forEach((opt) => dataToSubmit.append("Options", opt));
if (formData.image) {
dataToSubmit.append("Images", formData.image);
}
if (formData.video) {
dataToSubmit.append("video", formData.video);
} else if (videoUrl) {
dataToSubmit.append("videoUrl", videoUrl);
}
let imageUrlsToSend = imageUrl;
// Handle potential double-stringification or dirty strings
if (typeof imageUrlsToSend === "string") {
try {
// Attempt to parse stringified array
const parsed = JSON.parse(imageUrlsToSend);
if (Array.isArray(parsed)) {
imageUrlsToSend = parsed;
} else {
imageUrlsToSend = [parsed];
}
} catch (e) {
// Fallback: extract URL from string using regex
const urlMatch = imageUrlsToSend.match(/https?://[^s"]+/g);
imageUrlsToSend = urlMatch ? urlMatch : [imageUrlsToSend];
}
} else if (!Array.isArray(imageUrlsToSend)) {
imageUrlsToSend = [imageUrlsToSend];
}
if (voteId) dataToSubmit.append("VoteId", voteId);
try {
const response = await axios({
method: voteId ? "put" : "post",
url: voteId
? `${VOTE_URL}/Votes/update-vote`
: `${VOTE_URL}/Votes/create-vote`,
data: dataToSubmit,
headers: {
"Content-Type": "multipart/form-data",
Authorization: `Bearer ${token}`,
},
});
console.log("Response after vote is created: ", response.data);
toast.success(
voteId
? "Vote updated successfully!"
: "Congrats! Your Vote is created successfully!"
);
setQuestionType("");
setMcqOptions([]);
setImageUrl("");
setVideoUrl("");
setIsActive(isActive);
setPriority(null);
setFormData({
title: "",
description: "",
image: null,
video: null,
questionType: "",
yesNoOrTrueFalse: null,
mcqOptions: [],
priority: null,
});
} catch (error) {
console.error("Submit error:", error.response?.data || error.message);
toast.error("Something went wrong!");
}
};