Cloudinary - images are not displayed

[gwittm]

Hello! We implemented cloudinary at our app. The upload works. But our images are not displayed at our details page. We logged our file in the upload.js. It says that files.recipeImage[0] is not correct. As recipeImage is also the name of our input-field we don´t know where else to check that... we appreciate your support :)

You can see the actual state of our code here:
https://github.com/gwittm/Digital-Recipe-Book/tree/Cloudinary-Gabi

[doemser]

Unfortunately your link does not seem to work, so I am pasting it here again: https://github.com/gwittm/Digital-Recipe-Book/tree/Cloudinary-Gabi

Can you provide the logs you get on your upload route?
Can you also provide logs from your api/recipes route?

[onemanwenttomow]

I think the issue seems to be here

export default function ImageUpload() {
  const [image, setImage] = useState(null);
  const [url, setUrl] = useState("");
  const [loading, setLoading] = useState(false);
  const [preview, setPreview] = useState(null);

  const uploadImage = async () => {
    setLoading(true);
    const data = new FormData();
    data.append("file", image);  // -< You are appending something with the key of file, rather than recipeImage
    data.append(
      "upload_preset",
      process.env.REACT_APP_CLOUDINARY_UPLOAD_PRESET
    );
    data.append("cloud_name", process.env.REACT_APP_CLOUDINARY_CLOUD_NAME);
    data.append("folder", "Cloudinary-React");
    try {
      const response = await fetch(`/api/upload`, {
        method: "POST",
        body: data,
      });
      const res = await response.json();
      console.log("Image URL:", res.imageUrl); // Log the image URL
      setUrl(res.imageUrl);
      setLoading(false);
    } catch (error) {
      setLoading(false);
    }
  }

Maybe something like this would work better

  const uploadImage = async () => {
    setLoading(true);
    const data = new FormData();
    data.append("recipeImage", image); 
  
    ...etc
  }

You would also want to avoid adding the secrets in the client, as they would then be exposed. The secrets can be used in the api route that you have setup.

[gwittm]

Thank you for your help!
We managed to send the images to cloudinary. But the image can´t be sent to mongo db. When logging the whole recipe, that includes also the key "imageUrl", the imageUrl is not even displayed at the log. Logging the imageUrl itself it returns undefined.
We appreciate any ideas!

https://github.com/gwittm/Digital-Recipe-Book/tree/Cloudinary-Gabi