title: clear input file in vue 3
body: <p>I have this vue component in vue 3</p>
  <pre><code>&lt;template&gt;
      &lt;input type=&quot;file&quot; :class=&quot;inputClass&quot; accept=&quot;.pdf&quot; @input=&quot;onFileSelect&quot; ref=&quot;fileInput&quot;&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  import {ref} from &quot;vue&quot;;
  
  export default {
      name: &quot;FileInput&quot;,
      props: {
          inputClass: String
      },
      setup(props, {emit}) {
          const fileInput = ref(null)
  
          const onFileSelect = () =&gt; {
              const input = fileInput.value;
              const files = input.files;
              if(files &amp;&amp; files[0]) {
                  const reader = new FileReader;
  
                  reader.onload = e =&gt; {
                      emit('input', e.target.result);
                  }
  
                  reader.readAsDataURL(files[0]);
              }
          }
  
          return {fileInput, onFileSelect}
      }
  }
  &lt;/script&gt;
  </code></pre>
  <p>and in the component where I use it:</p>
  <pre><code>&lt;file-input input-class=&quot;form-control form-control-sm&quot; v-model=&quot;document.doc_file&quot; @input=&quot;getBase64File&quot;/&gt;
  
  setup() {
   const getBase64File = (file) =&gt; {
     document.value.doc_file = file
   }
  
  const document = ref({
    // ... other fields
    doc_file: null,            
  })
  
   const resetDocumentModel = () =&gt; {
     for(let field in document.value) {
       document.value[field] = null
     }
   }
  }
  </code></pre>
  <p>after submit the form in the input file filed still remains the filename and if I try to upload the same file again it won't take it.</p>
  <p>How to clear the input filename ?</p>