[Vue] Upload Image

uploadImage.vue

<template>
  <div class="col-span-1 rounded-lg">
    <div class="">
      <img v-if="imageURL" :src="imageURL" class="mx-auto w-full rounded-lg" alt="image" />
      <p v-else class="p-3 text-center text-sm">Mohon upload gambar produk.</p>
    </div>

    <div class="p-8 text-center">
      <button
        type="button"
        class="inline-flex items-center gap-2 rounded-md border border-transparent bg-indigo-600 px-4 py-2 text-sm text-white shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2"
      >
        <input id="inputLogo" type="file" accept="image/*" class="hidden" @change="handleFileInput" />
        <label for="inputLogo" class="mx-auto block cursor-pointer font-bold hover:underline">Upload Gambar</label>
      </button>
      <p v-if="errors.image" class="mt-3 text-xs text-red-500">{{ errors.image }}</p>
      <a v-if="imageURL" class="mt-3 block cursor-pointer text-sm text-red-500 hover:underline" @click="removeLogo">Hapus Gambar</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageURL: this.product.image || "",
      form: this.$inertia.form({
        image: this.product.image || "",
      }),
    };
  },

  methods: {
    handleFileInput(event) {
      [this.form.image] = event.target.files;
      this.imageURL = URL.createObjectURL(this.form.image);
    },

    removeLogo() {
      this.form.image = null;
      this.imageURL = null;
    },
  },
};
</script>