Cloudinary Image disappears in Edit

[shrocket]

This morning, we connected our app to Cloudinary and very happily uploaded several photos. Then, when testing our app's various functions, we noticed that editing an entry/service causes the previously assigned image to disappear, which we do not want.

However, we cannot find how to keep this from happening. 😠

At least one of us is convinced that defaultValue={service.image.url} should be helping here, but it doesn't . . .

We have looked into placeholder images, but are frustrated that the answers aren't more detailed (put that Cloudinary code where, exactly?!).

The code in question looks like this:

import ActionButton from "../Layout/ActionButton";
import FormContainer from "../Layout/Form/FormContainer";
import FormItem from "../Layout/Form/FormItem";

function formatDate(date) {
  if (date) {
    return new Date(date).toISOString().split("T")[0];
  }
  return new Date().toISOString().split("T")[0];
}

export default function ServiceForm({ onSubmit, service = {} }) {
  function handleSubmit(event) {
    event.preventDefault();
    const file = event.target.image.files[0];
    const data = Object.fromEntries(new FormData(event.target));
    onSubmit(data, file);
  }

  return (
    <FormContainer onSubmit={handleSubmit} aria-label="ServiceForm">
      <FormItem>
        <label htmlFor="name">Service Name: </label>
        <input
          id="name"
          name="name"
          type="text"
          defaultValue={service.name}
          required
        />
      </FormItem>

{/* LOOK HERE! */}

      <FormItem>
        <label htmlFor="image">Image: </label>
        <input
          id="image"
          name="image"
          type="file"
          defaultValue={service.image.url}
          required
        />
      </FormItem>

      <FormItem>
        <label htmlFor="description">Description: </label>
        <textarea
          id="description"
          name="description"
          cols="20"
          rows="4"
          defaultValue={service.description}
          required
        ></textarea>
      </FormItem>

      <label htmlFor="date">
        Date:{" "}
        <input
          id="date"
          name="date"
          type="date"
          defaultValue={formatDate(service.date)}
          required
        />
      </label>

      <label htmlFor="time">
        Time:{" "}
        <input
          id="time"
          name="time"
          type="time"
          defaultValue={service.time}
          required
        />
      </label>

      <label htmlFor="price">
        Price:{" "}
        <input
          id="price"
          name="price"
          type="number"
          defaultValue={service.price}
          required
        />
        <span> EUR</span>
      </label>

      <ActionButton type="submit">{service.name ? "Save" : "Add"}</ActionButton>
    </FormContainer>
  );
}

Here's our current PR. And here's a link to the relevant US.

[moonwave99]

Quick guess: you are not uploading a new image on subsequent edits, this leading to send an image object without meaningful information, overwriting the existing image.

Possible solution: on the edit field, hide the file input field by default via state, and display just if the user wants to upload a new picture - mark it as required so they cannot leave it blank:

import { useState } from 'react';

function ServiceForm({ service = {}, onSubmit }) {
  const [showFileInput, setShowFileInput] = useState(!service._id);

  ...

  return (
    <form onSubmit={...}>
      ...
      {showFileInput ? (
        <div className="image-uploader">
          <label>
            Image
            <input name="image" type="file" required />
          </label>
          <button type="button" onClick={() => setShowFileInput(false)}>
            Cancel
          </button>
        </div>
      ) : (
        <button type="button" onClick={() => setShowFileInput(true)}>
          Upload Image
        </button>
      )}
      <button>Submit</button>
    </form>
  );
}

Demo (see console for effect on submit)

---

Don't forget to upload to Cloudinary just in the case you are providing a file, i.e.:

async function onSubmit(data, file) {
  let image;
  if (file) {
    image = await uploadImage(file);
  }
  await editService(id, { ...data, image });
  // ...
}