Image reset does not work

[gwittm]

Hi! At our RecipeForm we can add images. They can be uploaded to cloudinary, which works. But resetting does not work correctly. The image name is not displayed, which is correct. But the image remains at cloudinary. Also, when the image was already uploaded, after resetting it remains at our recipe-page.

we appreciate any help!

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

[NikRoe]

Hi Gabi,

when deleting an image from cloudinary, you can use the destroy method Cloudinary provides.

This method accepts the public_id of the respective image as an argument. Since this is an information that is currently not stored in your application, we need to make some adjustments.

The code in your API Route (/api/upload/index.js) could look similar to this:

if (request.method === "DELETE") {
    const public_id = request.query.id;

    await cloudinary.v2.uploader.destroy(public_id);

    response.status(200).json({ message: "Image removed from Cloud" });
  }

You should make sure that this if statement will actually be reached. Right now there is a check in that route that only accepts the POST Method.

In your component ImageUpload you need to update your handleResetClick function to make a call to this API Route and send the image's public id.
This function also needs to change the image in the state that you use to send the recipe to your database.

// ...
try {
      const response = await fetch(`/api/upload?id=${image.publicId}`, {
        method: "DELETE",
      });

      if (response.ok) {
        await response.json();
        onAddImage({ imageUrl: "", publicId: "" });

        setIsLoading(false);
      } else {
        setIsLoading(false);
      }
    } catch (error) {
      setIsLoading(false);
    }

I renamed onAddUrl to onAddImage, since we now want to have an object with the imageUrl and the public_id

This has further implications for several parts of your application.

You need the updateImage function to call onAddImage with the whole response, instead of only the imageUrl:

//
if (response.ok) {
        const res = await response.json();
        onAddImage(res);

        setIsLoading(false);
      } else {
        setIsLoading(false);
      }
//

There might also be other places where you currently used the imageUrl, but need to change this to image.imageUrl.

In your FormularAddRecipe component you need to change the state from only having the string of the imageUrl to be an object instead:

const [image, setImage] = useState(defaultData?.image || null);

And the handleAddUrl function should be renamed as well:

function handleAddImage(newImage) {
    setImage(newImage);
  }

Your handleSubmit now needs to pass the image instead of the imageUrl:

onSubmit({ ...data, ingredients, image });

Please make sure to also rename the props accordingly =)

You also need to make an adjustment to your schema so that it accepts the updated data structure:

const recipeSchema = new Schema({
  title: { type: String, required: true },
  preparation: { type: String },
  type: { type: String },
  time: { type: String },
  servings: { type: Number },
  ingredients: [
    {
      ingredientID: { type: String, required: true },
      name: { type: String, required: true },
      amount: { type: Number, required: true },
      unit: { type: String },
    },
  ],
  instruction: { type: String },
  image: { type: Object },
});

This should enable the deletion of images that were uploaded to cloudinary from cloudinary and also from your database.

I also noticed I received an error for the placeholder image (TestImage.jpg).
If you want this error message to go away and to display the image correctly, you need to change the source to this:
src="/TestImage.jpg"

I hope this already makes everything work, let me know otherwise

[gwittm]

Thank you for your help! I tried to solve the issue but could not manage. Instead i created some new ones :/
The images are not displayed now - except one. (The detail page gives an error, but i guess that´s because of my mixture of onAddUrl and onAddImages and the props :/ ) do i need to rename onAddUrl to onAddImage for all existing operations or only for the delete? Now i have both and i guess that is my problem?
The Branch is updated... Thank you!!!

[NikRoe]

Hi Gabi,

yes, you need to rename it in every location where it is being used.

And that older images are no longer displayed is related to the change in the data structure.

Prior to our changes, they were being saved as a string and they exist in that same way in the database still.

But with the changes, you always have an object for the image that contains the URL as well as the public id.
The logic in your application is only capable of handling the newly added images, since we try to access keys within the image object.

Try to rename the functions to onAddImage where you worked previously with onAddUrl.

After having done this, you should be able to add new images and remove those newly added images as well.

If this does not work, please let me know and we will look at this together!

[gwittm]

Hi Niklas! Ok thank you, that makes sense. I can add new new recipes with new images and they are displayed. But deleting still does not work :/ we would be happy if you could come over...