What is the recommended way of handling image uploads in a form that supports both adding and editing with zod?

[its-monotype]

What is the recommended way of handling image uploads in a form that supports both adding and editing of a product? Here is my current implementation with two options, is there any suggestion to improve it?

Here is the first option when an image converts to the File object and sets it as the default value for the image in the form:

const getFileFromUrl = async (url: string) => {
  const res = await fetch(url);
  const blob = await res.blob();
  return new File([blob], 'image', { type: blob.type });
};

const productForm1Schema = z.object({
  name: z.string().min(1, { message: 'Name is required' }),
  image: z
    .custom<File>((v) => v instanceof File, {
      message: 'Image is required',
    })
});

export type ProductForm1Values = z.infer<typeof productForm1Schema>;

interface ProductForm1Props {
  product?: Product;
}

export const ProductForm1 = ({ product }: ProductForm1Props) => {
  const isAddMode = !product;

  const {
    register,
    handleSubmit,
    control,
    watch,
    reset,
    formState: { errors, isSubmitting, isDirty },
  } = useForm<ProductForm1Values>({
    resolver: zodResolver(productForm1Schema),
    defaultValues: product
      ? async () => ({
          name: product.name,
          image: await getFileFromUrl(product.image),
        })
      : {
          name: '',
          image: undefined,
        },
  });

  const image = watch('image');
  const imagePreview = image ? URL.createObjectURL(image) : null;

  // revoke object URL to avoid memory leaks
  useEffect(() => {
    return () => {
      if (imagePreview) URL.revokeObjectURL(imagePreview);
    };
  }, [imagePreview]);

  const onSubmitHandler = async (data: ProductForm1Values) => {
    console.log(data);

    // build FormData for uploading image
    const formData = new FormData();
    formData.append('file', data.image);

    // mock upload image to server to get image url
    const imageUrl = await new Promise<string>((resolve) => {
      setTimeout(() => {
        resolve('https://via.placeholder.com/150');
      }, 1000);
    });

    if (isAddMode) {
      // create product
      console.log({ ...data, image: imageUrl });
    } else {
      // update product
      console.log({ id: product!.id, ...data, image: imageUrl });
    }

    reset();
  };

  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <input {...register('name')} />
      {errors.name && <span>{errors.name.message}</span>}

      <Controller
        name="image"
        control={control}
        render={({ field: { ref, name, onBlur, onChange } }) => (
          <input
            type="file"
            ref={ref}
            name={name}
            onBlur={onBlur}
            onChange={(e) => onChange(e.target.files?.[0])}
          />
        )}
      />
      {imagePreview && <img src={imagePreview} alt="preview" />}
      {errors.image && <span>{errors.image.message}</span>}

      <button type="submit" disabled={(!isAddMode && !isDirty) || isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
};

OR

Here is the second option when I created two schemas for creating and updating products and in the update schema image is optional:

const createProductSchema = z.object({
  name: z.string().min(1, { message: 'Name is required' }),
  image: z
    .custom<File>((v) => v instanceof File, {
      message: 'Image is required',
    })
});

const updateProductSchema = createProductSchema.extend({
  image: createProductSchema.shape.image.optional(),
});

export type ProductForm2Values =
  | z.infer<typeof createProductSchema>
  | z.infer<typeof updateProductSchema>;

interface ProductForm2Props {
  product?: Product;
}

export const ProductForm2 = ({ product }: ProductForm2Props) => {
  const [imagePreview, setImagePreview] = useState<string | null>(
    product ? product.image : null,
  );

  const isAddMode = !product;

  const {
    register,
    handleSubmit,
    control,
    reset,
    formState: { errors, isSubmitting, isDirty },
  } = useForm<ProductForm2Values>({
    resolver: zodResolver(
      isAddMode ? createProductSchema : updateProductSchema,
    ),
    defaultValues: {
      name: product?.name ?? '',
      image: undefined,
    },
  });

  // revoke object URL to avoid memory leaks
  useEffect(() => {
    return () => {
      if (imagePreview) URL.revokeObjectURL(imagePreview);
    };
  }, [imagePreview]);

  const onSubmitHandler = async (data: ProductForm2Values) => {
    console.log(data);

    let imageUrl: string | undefined;
    if (data.image) {
      // build FormData for uploading image
      const formData = new FormData();
      formData.append('file', data.image);

      // mock upload image to server to get image url
      imageUrl = await new Promise<string>((resolve) => {
        setTimeout(() => {
          resolve('https://via.placeholder.com/150');
        }, 1000);
      });
    }

    if (isAddMode) {
      // create product
      console.log({ ...data, image: imageUrl! });
    } else {
      // update product
      console.log({ id: product!.id, ...data, image: imageUrl });
    }

    reset();
    setImagePreview(product?.image ?? null);
  };

  return (
    <form onSubmit={handleSubmit(onSubmitHandler)}>
      <input {...register('name')} />
      {errors.name && <span>{errors.name.message}</span>}

      <Controller
        name="image"
        control={control}
        render={({ field: { ref, name, onBlur, onChange } }) => (
          <input
            type="file"
            ref={ref}
            name={name}
            onBlur={onBlur}
            onChange={(e) => {
              const file = e.target.files?.[0];
              onChange(e.target.files?.[0]);
              setImagePreview(file ? URL.createObjectURL(file) : null);
            }}
          />
        )}
      />
      {imagePreview && <img src={imagePreview} alt="preview" />}
      {errors.image && <span>{errors.image.message}</span>}

      <button type="submit" disabled={(!isAddMode && !isDirty) || isSubmitting}>
        {isSubmitting ? 'Submitting...' : 'Submit'}
      </button>
    </form>
  );
};

[leapful]

@its-monotype

The recommended solution to handle image upload is to use pre-signed url (AWS S3 service or similar service) which generates upload url to upload the image file and download url to be set inside form values.

For example:

const App = () => {
   const { handleSubmit, register } = useForm();

   const { onChange, ...avatarField  } = register('avatar');
  
   const onUploadAvatar = async (event) => {
      // Call API to BE to generate a pre-signed url to upload file object
      const response = await fetch('/generate-upload-url');
      const { presignedUploadUrl } = await response.json();
       // Use the pre-signed upload url to upload the image
      const imageResponse = await fetch(presignedUploadUrl, { body: event.target.files[0] });
      // Depends on configuration of AWS S3, response can include an url that points to uploaded image
     const { url } = await imageResponse.json();
     // Trigger onChange callback of react-hook-form to set uploaded image url string to form
     onChange(url);
   }

   const onSubmit = (formValues) => {
      // avatar field inside form values is now an static url
   }

   return <form onSubmit={handleSubmit(onSubmit)}>
    <input {...register('name')} />
    <input type="file"  {...avatarField} onChange={onUploadAvatar} />
</form>
}

In case your existing application cannot change to this solution, you still can simplify the image handling by keep image field as string then transform target image from event.target.files[0] to base64 image and save it with the form.

[its-monotype]

But it seems like uploading images on input change is worse than uploading them on the form submit? There will be extra requests, and what if, for example, the user changes the picture to another one or simply uploads the picture and closes the form? And if I save them as a string in the form, how can I validate the file type, size, etc.?

[leapful]

@its-monotype

The new approach of pre-signed url requires new policy from your BE side, for example, setting short time lifecycle by default (like 1 day) on uploaded file object then only reset its lifecycle to stay forever on S3 after your form has been submitted successfully.

Pros:

• Delegate upload handling to 3rd party storage service including validation file type, size
• Avoid storing binary file into database in case BE saves the form as database entity
• Avoid duplicate uploads: from FE to BE then BE to 3rd party storage service in case you already uses it on your infrastructure for binary file
• Avoid stress on BE server in case uploading large file

For case save image as a string in the form, you can still perform validation on file type, size in client-side via File object from event.target.files[0]. Transform image to base64 string at onChange phase or onSubmit phase does not block you from validating it in FE side.

On BE side, you just need to transform base64 string back to binary buffer then perform validation again if you want.

[d3vr10]

@leapful This will definitely allow for a smoother experience. I was wondering how I would deal with the constant file changing from malicious or.. very forgetful users, because even if you limited file size to say a tight 5 MB, there is still no restriction to how many files can be issued per <client/agent>. The only moderately trustful way I can come up with to handle this is via IP... from the browser this cannot be done due to security restrictions but if you request your BE or a third-party API and then get the browser's IP in return you could definitely rate-limit the anonymous user. And then maybe define a time window between requests and max upload limit per "identity" during the day.

Though... even so... delegating to a third-party storage service is good as far as we are talking about mega vendors like amazon. But if you planned in self hosting your own s3 service (say minIO s3) and expose it to the internet, you'd have to paranoically deal constantly with CVEs. So I think this might be something to consider when deciding the approach. Maybe for this case one would be better off by delegating the upload to BE and setting up a bunch of upload-dedicated apis plus a load balancer/reverse proxy to cope with stress.

Hopefully this makes any sense.

[MrAbubakarjutt007]