#828 JSON Parse Error for Image Upload

[SylvieDoumet]

Hi, I want to implement an Image Upload via Cloudinary in our App Homemade Remedies (see PR) . The image upload is implemented on a User form for Adding Remedies. The code is all done, but unfortenatly, I get an

Unhandleled Runtime Error : 
SyntaxError: JSON.Parse: unexpected character at line 1 column 1 of the JSON data

, when I upload an image.
Can someone have a look and tell us what the problem could be ?
Thanks ! :-)

[JessicaLoers]

Check for Proper File Field in Frontend

In the form data you're sending to the API, ensure that the field name for the image is correctly aligned with the backend. You named it name="cover" in the form input, but in the backend you're expecting image. Align them by changing one of these to match the other.
For example, change:

// api/upload/index.js

//  ⬇️ cover instead of image, according to the field nam of your input element.
  const file = files.cover[0];

[JessicaLoers]

Apart from that I found the following issues in your code.

1. You are saving the entire response from Cloudinary to image, which could is an object with multiple pieces of data, but you never actually use the URL for the image that Cloudinary returns. Instead, you are using a placeholder image "/placeholder.jpg" when adding a new remedy.

➡️ Extract the url from the Cloudinary response const { url } = await response.json(); This URL is what we need to display the uploaded image. Then use this url as the value for imageUrl in the remedyData. This ensures that the correct image is displayed when you add or edit a remedy.

async function handleSubmit(event) {
    event.preventDefault();

    const formData = new FormData(event.target);
    const formObject = Object.fromEntries(formData);

    const response = await fetch("/api/upload", {
      method: "POST",
      body: formData,
    });

    const { url } = await response.json();

    const remedyData = {
      ...formObject,
      ingredients: ingredients,
      symptoms: selectedSymptoms,
      // the wrong key was also set here
      imageUrl: url,
    };

    isEditMode
      ? onEditRemedy({ remedyData })
      : onAddRemedy({ ...remedyData, imageUrl: url });

    event.target.reset();
    setIngredients([""]);
    setSelectedSymptoms([]);

    router.back();
  }

2. The configuration in the next.config file only allows images from "Pexels" and "Unsplash". If you're trying to use images from Cloudinary, they won't be properly rendered because Cloudinary's domain is not included.

{
  protocol: "http",
  hostname: "res.cloudinary.com",
  port: "",
  pathname: "/**",
}

💡 I want to highlight that these are issues you could have identified yourself by using the console to log key parts of your code.

For example, in the image upload process, if you had logged the response from Cloudinary, like this:

const response = await fetch("/api/upload", {
  method: "POST",
  body: formData,
});

console.log(await response.json()); // This would show you what Cloudinary is returning

You would have noticed that the response includes the url, which you needed to use instead of saving the whole response object.