<template>
  <div class="input-group my-3">
    <input 
        type="file" 
        class="form-control"
        @change="handleInputFileChange"
        :key="data.fileInputKey"
     />
    <button class="btn btn-sm btn-primary"
       @click="uploadImage"
    >
      Upload
    </button>
  </div>
</template>

<script setup>
 import { reactive } from "vue"

 //define the data object 
 const data = reactive({
    image: null,
    fileInputKey: 0
 })

 //handle file input change
 const handleInputFileChange = (event) => {
    data.image = event.target.files[0];
 }

 //upload image function
 const uploadImage= async () => {
   console.log('image uploaded')   
   //clear the file input field
   data.fileInputKey++
 }
</script>