SimpleDropZoneComponent.vue

<script setup>
import { watch } from "vue";
import { useDropzone } from "vue3-dropzone";
import BaseButton from "../components/BaseButton.vue";

const props = defineProps({
  resetFiles: {
    type: Boolean,
    default: false,
  },
});

const emit = defineEmits(["update-files", "setRef"]);

const onDrop = (acceptFiles, rejectReasons) => {
  emit("update-files", acceptFiles);
};

const { getRootProps, getInputProps, isDragActive, acceptedFiles, ...rest } =
  useDropzone({
    onDrop,
  });

const open = () => {
  document.getElementById("drop-zone").click();
};

const createUrl = (image) => {
  return URL.createObjectURL(image);
};

watch(
  () => props.resetFiles,
  (val, oldVal) => {
    if (val == true) acceptedFiles.value = [];
  }
);
</script>

<template>
  <div>
    <div v-bind="getRootProps()" class="w-full">
      <input id="drop-zone" v-bind="getInputProps()" />
      <div
        :class="`flex flex-col justify-center items-center w-full p-4 gap-3 border rounded-lg ${
          isDragActive ? 'border-blue-400' : 'border-gray-200'
        }`"
      >
        <p
          v-if="isDragActive"
          class="capitalize font-normal text-gray-500 text-sm"
        >
          drop files here
        </p>
        <p v-else class="capitalize font-normal text-gray-500 text-sm">
          drag and drop files
        </p>
        <BaseButton
          label="Browse Device"
          color="info"
          outline
          small
          @click="open"
        />
      </div>
    </div>
    <div v-if="acceptedFiles.length > 0" class="flex gap-2 mt-2 w-full">
      <div
        v-for="(image, index) in acceptedFiles"
        :key="index"
        class="w-[60px] rounded-md overflow-hidden border-0.5 border-gray-200"
      >
        <img :src="createUrl(image)" class="w-ful h-auto" />
      </div>
    </div>
  </div>
</template>