file input set to {} by default? is this by design?

[tombburnell]

Why does value of a registered file input default to empty object {}.

<input
      type="file"
      {...register('image_url', { onChange: (e) => handleImageUpload(e, (imageUrl) => {
          console.log("Uploaded...", imageUrl);
          setValue("image_url", imageUrl);             
      })})}
/>
 <PrintObject content={watchFields.image_url}/>
{(watchFields.image_url && typeof watchFields.image_url != 'object') ?
  <div className={"w-[200px] h-[200px] "}>
      <img className={"h-full w-full"}  src={watchFields.image_url}/>
  </div>
  : ""} 

I only want to show the img tag once the image is uploaded and url returned, but when using register, image_url becomes set to {} by default and so it is always true and thus I have to check for typeof watchFields.image_url != 'object')

Is this by design?

Also I think this is causing the input to always validate as I am not getting an error even when I haven't set an image.
I will have to create a custom validation to also check for != {}

I should add that I am trying to register it because my current code has a different problem..

This code does not have the {} problem above - except that after I add the image, the validation errors do not clear, despite trying to revalidate because the setValue() is asynchronous. Is there any way to profile a callback to setValue?

<input
type="file"
onChange={(e) => { handleImageUpload(e, (imageUrl) => {
setValue("image_url", imageUrl);
handleSubmit((x) => { console.log("revalidate", watchFields.imageUrl);
}
)}}
/>

I'm not quite sure what the best approach is - try to register it and figure out the {} or not register it and manually revalidate..
I feel like the default use-case catered for the file field is to upload on form submission, but I want to upload when the user selects the image and then store the return url.

Thanks!

[mdulc928]

I recently ran into this too, and almost gave up, but perseverance paid off when I sought to understand the error that I was being shown: Here it is: https://stackoverflow.com/questions/74266662/react-js-how-to-set-the-default-value-of-a-file-input/78089406#78089406