title: Vue - how to get a file to a hidden input field
body: <p>I am currently previewing an image, but would also like to actually return somehow the file to my form, so that I can later submit it in the backend, but not sure how to do that?</p>
  
  <p>This is my component:</p>
  
  <pre><code>&lt;template&gt;
  &lt;div&gt;
    &lt;div v-if="!image"&gt;
      &lt;h2&gt;Select an image&lt;/h2&gt;
      &lt;input type="file" @change="onFileChange"&gt;
    &lt;/div&gt;
    &lt;div v-else&gt;
      &lt;img :src="image" /&gt;
      &lt;button @click="removeImage"&gt;Remove image&lt;/button&gt;
      &lt;input type="file" v-bind:value="{ file }" style="display:none"&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script&gt;
  export default {
      data() {
          return {
              image: '',
              formData:new FormData()
          }
      },
      methods: {
          onFileChange: function onFileChange(e) {
              var files = e.target.files || e.dataTransfer.files;
              if (!files.length)
                  return;
              this.createImage(files[0]);
              this.formData.append('file', files[0]);
          },
          createImage: function createImage(file) {
              var image = new Image();
              var reader = new FileReader();
              var vm = this;
              reader.onload = function (e) {
                  vm.image = e.target.result;
              };
              reader.readAsDataURL(file);
          },
          removeImage: function removeImage(e) {
              this.image = '';
          }
      }
  }
  &lt;/script&gt;
  </code></pre>
  
  <p>I have tried with adding <code>formData:new FormData()</code> to data function and then appending the file to formData object like this:</p>
  
  <pre><code>this.formData.append('file', files[0]);
  </code></pre>
  
  <p>But I get an error: </p>
  
  <blockquote>
    <p>formData is not defined</p>
  </blockquote>