title: Uploading a file using only the input field - React Hook Form
body: <p>I'm my app, I have a file input to submit a file and send it to a firebase storage bucket. I'm using the react-hook-form library for this task. The problem is, that I wanted to make the file to be uploaded by only having the input element, I didn't want to have a button to submit it. This is all related to the styles, I could make a submit button and it would certainly work. I saw a video in which the author shows how to create this functionality and even integrate it with firebase, but he has a submit button</p>
  <p>This is my how he did it</p>
  <pre><code>import React from &quot;react&quot;;
  import { useForm } from &quot;react-hook-form&quot;;
  
  function App() {
    const { register, handleSubmit } = useForm() 
  
    const onSubmit = (data) =&gt; {
      console.log(data)
    }
  
    return (
      &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
        &lt;input ref={register} type=&quot;file&quot; name=&quot;picture&quot; /&gt;
        &lt;button&gt;Submit&lt;/button&gt;
      &lt;/form&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>To see the firebase implementation, you can check this <a href="https://www.youtube.com/watch?v=XlAs-Lid-TA" rel="nofollow noreferrer">link</a></p>