Javascript Vue: Where does the variable ‘e’ in onFileChange(e) originate?

Javascript Vue: Where does the variable e in onFileChange(e) originate?

In the following code, there is a variable e in onFileChange(e), where does it originate? It is never declared or imported in the code, so how can it be valid?

Any help would be greatly appreciated.

<template>
  <div class="container" style="margin-top: 50px;">
    <div class="text-center">
      <h4>File Upload with VueJS and Laravel</h4>
      <br />
      <div style="max-width: 500px; margin: 0 auto;">
        <div v-if="success !== ''" class="alert alert-success" role="alert">
          {{success}}
        </div>
        <form @submit="submitForm" enctype="multipart/form-data">
          <div class="input-group">
            <div class="custom-file">
              <input
                type="file"
                name="filename"
                class="custom-file-input"
                id="inputFileUpload"
                v-on:change="onFileChange"
              />
              <label class="custom-file-label" for="inputFileUpload"
                >Choose file</label
              >
            </div>
            <div class="input-group-append">
              <input type="submit" class="btn btn-primary" value="Upload" />
            </div>
          </div>
          <br />
          <p class="text-danger font-weight-bold">{{filename}}</p>
        </form>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    mounted() {
      console.log("Component successfully mounted.");
    },
    data() {
      return {
        filename: "",
        file: "",
        success: ""
      };
    },
    methods: {
      onFileChange(e) {
        //console.log(e.target.files[0]);
        this.filename = "Selected File: " + e.target.files[0].name;
        this.file = e.target.files[0];
      },
      submitForm(e) {
        e.preventDefault();
        let currentObj = this;
        const config = {
          headers: {
            "content-type": "multipart/form-data",
            "X-CSRF-TOKEN": document.querySelector('meta[name="csrf-token"]')
              .content
          }
        };

        // form data
        let formData = new FormData();
        formData.append("file", this.file);

        // send upload request
        axios
          .post("/store_file", formData, config)
          .then(function(response) {
            currentObj.success = response.data.success;
            currentObj.filename = "";
          })
          .catch(function(error) {
            currentObj.output = error;
          });
      }
    }
  };
</script>

Answer

That declaration is triggered by your template, where you are binding change event to the method. The whole event as parameter gets passed to the method, Refer this section of Vue docs for better information https://v2.vuejs.org/v2/guide/events.html#Method-Event-Handlers

Advertisement

Answer