Using with react-hook-form

[Zechst]

Hello, I would like to ask if anyone knows how to use this package together with react-hook-form .

Still relatively novice and currently unable to find any tutorials on linking this package to it. Appreciate for any help rendered

[nghaosiong98]

Checkout this link to the documentation.

Below is a basic react-hook-form integration using Controller.

import Select from "react-select";
import { useForm, Controller } from "react-hook-form";
import ReactImageUploading, { ImageListType } from "react-images-uploading";

interface IFormInput {
  images: ImageListType;
}

const App = () => {
  const { control, handleSubmit } = useForm<IFormInput>();

  const onSubmit: SubmitHandler<IFormInput> = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Controller
        name="images"
        control={control}
        render={({ field: { value, onChange } }) => (
          <ReactImageUploading value={value} onChange={onChange}>
            {({
              imageList,
              onImageUpload,
              onImageRemoveAll,
              onImageUpdate,
              onImageRemove,
              isDragging,
              dragProps,
            }) => (
              <div className="upload__image-wrapper">
                <button
                  style={isDragging ? { color: "red" } : undefined}
                  onClick={onImageUpload}
                  {...dragProps}
                >
                  Click or Drop here
                </button>
                &nbsp;
                <button onClick={onImageRemoveAll}>Remove all images</button>
                {imageList.map((image, index) => (
                  <div key={index} className="image-item">
                    <img src={image["data_url"]} alt="" width="100" />
                    <div className="image-item__btn-wrapper">
                      <button onClick={() => onImageUpdate(index)}>
                        Update
                      </button>
                      <button onClick={() => onImageRemove(index)}>
                        Remove
                      </button>
                    </div>
                  </div>
                ))}
              </div>
            )}
          </ReactImageUploading>
        )}
      />
      <button type="submit">Test</button>
    </form>
  );
};

[Bacale-Kevin]

hello @nghaosiong98 thank you very much for this detailed explanation!.

[RayBans2111]

Good day! I currently have my component setup in this fashion, however, I noticed that when I click on the remove button, this immediately prompts the file explorer to reappear for one to upload an image. I would like the user to have to manually click on the upload button again instead of the popup automatically appearing.

Is there a reason that this happens?