FileInput

FileInput.vue

<usage>
  <div class="h-64"> <!-- Set dimensions here -->
    <FileInput v-model="file"/>
  </div>
</usage>

<template>
  <label
    class="flex justify-center items-center relative rounded-lg overflow-hidden bg-gray-300 w-full h-full"
  >
    Add a preview image
    <span
      v-show="src"
      class="z-20 bg-red absolute top-0 right-0 rounded-full mt-1 mr-1 bg-red-600 text-white w-8 h-8 flex justify-center items-center shadow-md"
      @click.prevent="$emit('input', null)"
    >X</span>
    <input type="file" class="z-10 hidden" @change="$emit('input', $event.target.files[0])">
    <img :src="src" class="object-cover absolute">
  </label>
</template>

<script>
export default {
  name: "FileInput",

  props: ["value"],

  computed: {
    src() {
      return this.value ? URL.createObjectURL(this.value) : null;
    }
  }
};
</script>

https://codesandbox.io/s/e37th