og-image/src/ui/FileForm.vue

<template>
  <label
    v-if="label"
    class="block text-sm font-medium text-gray-700"
    :for="id"
    v-text="label"
  />
  <input
    :id="id"
    class="mt-2 block w-full rounded-md border-gray-300 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50"
    type="file"
    :class="class"
    @change="convertFileToBase64($event.target.files)"
  >
</template>

<script>
import { toBase64 } from '../util/file'

export default {
  props: {
    modelValue: {
    },
    label: {
      type: String,
      required: false,
    },
    id: {
      type: String,
      required: true,
    },
    class: {
      type: String,
      required: false,
    },
  },
  emits: ['update:modelValue'],
  methods: {
    async convertFileToBase64(files) {
      if (files.length) {
        const value = await toBase64(files[0])

        this.$emit('update:modelValue', value)
      }
    },
  }
}
</script>