React hook form: How to can I use onChange on React Hook Form Version 7.0

Question

Previously I used to write like this:

<input className="form-control" name="productImage" type='file' onChange={handleImageUpload} ref={register({ required: true })} />

After the update I have to write like this:

<input className="form-control" type="file" {...register('productImage', { required: true })} />

How do I use onChange={handleImageUpload} on the updated version of React Hook Form? Here is the migration docs

Please pardon my mistakes in the manner of asking the question. I'm new to these things. Thank you.

Answer 1

You just have to move the onChange props after {...register(...)}

const productImageField = register("productImage", { required: true });

return (
    <input
        className="form-control"
        type="file"
        {...productImageField}
        onChange={(e) => {
          productImageField.onChange(e);
          handleImageUpload(e);
     }}
    />
)

(Dec 3 2021) edit: this approach is no longer correct since react-hook-form v7.16.0's changes, see @Bill's answer.