Cloudinary widget not working on live site
So I am using a React-Typescript App, where the user has to upload a picture and I am using a Cloudinary widget for that. The widget works perfectly when the server is run locally
But when I host the website, the widget doesn't work.
The code for that widget is:
import {
Box,
Button,
FormControl,
FormLabel,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalFooter,
ModalHeader,
ModalOverlay,
Textarea,
useDisclosure,
useToast,
} from "@chakra-ui/react";
import { doc, setDoc } from "firebase/firestore";
import { useRef, useState } from "react";
import uuid from "react-uuid";
import { db } from "../../utils/firebaseConfig";
function PublishItem() {
const cloudinaryRef = useRef<any>();
const widgetRef = useRef<any>();
const toast = useToast();
const [isLoading, setIsLoading] = useState(false);
const { isOpen, onOpen, onClose } = useDisclosure();
const [itemInfo, setItemInfo] = useState({
itemName: "",
itemPrice: "",
itemDesc: "",
auctionTimeLeft: "",
itemPhotoURL: "",
});
// upload image to cloudinary and get upload url
cloudinaryRef.current = window.cloudinary;
let cloudinaryWidget = window.cloudinary.createUploadWidget(
{
cloudName: import.meta.env.VITE_APP_CLOUDINARY_CLOUDNAME,
uploadPreset: import.meta.env.VITE_APP_CLOUDINARY_UPLOADPRESET,
},
(error: any, result: any) => {
if (!error && result && result.event === "success") {
// console.log("Done! Here is the image info: ", result.info);
setItemInfo({
...itemInfo,
itemPhotoURL: result.info.secure_url,
});
}
}
);
const handleInput = (event: any) => {
setItemInfo({
...itemInfo,
[event.target.name]: event.target.value,
});
};
async function itemPublishClickHandler(e: any) {
e.preventDefault();
// setIsLoading(true);
// upload image
const itemUniqueId = uuid().substring(0, 19).split("-").join("");
try {
const docRef = doc(db, "itemData", itemUniqueId);
const itemData = {
itemId: itemUniqueId,
itemName: itemInfo.itemName,
itemPrice: itemInfo.itemPrice,
itemDesc: itemInfo.itemDesc,
auctionTimeLeft: itemInfo.auctionTimeLeft,
itemPhotoURL: itemInfo.itemPhotoURL,
};
// const docRef = await addDoc(collection(db, "itemData"), {
// itemId: uuid(),
// itemName: itemInfo.itemName,
// itemPrice: itemInfo.itemPrice,
// itemDesc: itemInfo.itemDesc,
// auctionTimeLeft: itemInfo.auctionTimeLeft,
// itemPhotoURL: itemInfo.itemPhotoURL,
// });
// console.log("Document written with ID: ", docRef.id);
setDoc(docRef, itemData)
.then((docRef) => {
setIsLoading(false);
toast({
title: "Your item is online now",
status: "success",
duration: 2000,
isClosable: false,
});
})
.catch((error) => {
console.log(error);
console.error("Error adding item: ", e);
setIsLoading(false);
toast({
title: "Error adding item",
description: `${e}`,
status: "error",
duration: 2000,
isClosable: false,
});
});
} catch (error) {
console.log(error);
console.error("Error adding item: ", e);
setIsLoading(false);
toast({
title: "Error adding item",
description: `${e}`,
status: "error",
duration: 2000,
isClosable: false,
});
}
onClose();
}
return (
<div>
<Box my={2} mx={6} borderRadius="md">
<Button onClick={onOpen} colorScheme="teal">
Publish a new item
</Button>
</Box>
<Modal closeOnOverlayClick={false} isOpen={isOpen} onClose={onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader>Publish a new auction</ModalHeader>
<ModalCloseButton />
<ModalBody pb={6}>
<FormControl isRequired marginBottom={4}>
<FormLabel>Add Item Image</FormLabel>
<Button onClick={() => cloudinaryWidget.open()}>
Click to Upload Item Image
</Button>
</FormControl>
<FormControl isRequired marginBottom={4}>
<FormLabel>Item Name</FormLabel>
<Input
type="text"
name="itemName"
defaultValue={itemInfo.itemName}
onChange={handleInput}
/>
</FormControl>
<FormControl isRequired marginBottom={4}>
<FormLabel>Item Base Price</FormLabel>
<Input
name="itemPrice"
defaultValue={itemInfo.itemPrice}
onChange={handleInput}
></Input>
</FormControl>
<FormControl isRequired marginBottom={4}>
<FormLabel>Item Description</FormLabel>
<Textarea
placeholder=""
name="itemDesc"
defaultValue={itemInfo.itemDesc}
onChange={handleInput}
/>
</FormControl>
<FormControl isRequired>
<FormLabel>Auction Ending date-time</FormLabel>
<Input
placeholder="Select Date and Time"
size="md"
type="datetime-local"
name="auctionTimeLeft"
defaultValue={itemInfo.auctionTimeLeft}
onChange={handleInput}
/>
</FormControl>
</ModalBody>
<ModalFooter>
<Button
colorScheme="blue"
mr={3}
onClick={itemPublishClickHandler}
isLoading={isLoading}
loadingText="Publishing..."
>
Publish
</Button>
<Button onClick={onClose}>Cancel</Button>
</ModalFooter>
</ModalContent>
</Modal>
</div>
);
}
export default PublishItem;
Can you help me in diagnosing the issue, please?-
Hi Ashutosh,
Could you please open a private ticket with your live website here? and add some more details? (if you get any errors on the console, etc.)
Thanks,
Tamara
Post is closed for comments.
Comments
1 comment