nocodb/packages/nc-gui/components/import/DropOrSelectFileModal.vue

<template>
  <v-dialog v-model="dropOrUpload" max-width="600">
    <v-card max-width="600">
      <!--      <div class="pa-4">
              <div
                class="nc-droppable d-flex align-center justify-center flex-column"
                :style="{
                  background : dragOver ? '#7774' : ''
                }"
                @click="$refs.file.click()"
                @drop.prevent="dropHandler"
                @dragover.prevent="dragOver = true"
                @dragenter.prevent="dragOver = true"
                @dragexit="dragOver = false"
                @dragleave="dragOver = false"
                @dragend="dragOver = false"
              >
                <v-icon size="50" color="grey">
                  mdi-file-plus-outline
                </v-icon>
                <p class="title grey&#45;&#45;text mb-1 mt-2">
                  Select {{ text }} file to Upload
                </p>
                <p class="grey&#45;&#45;text ">
                  or drag and drop {{ text }} file
                </p>
              </div>
              <input
                ref="file"
                class="nc-excel-import-input"
                type="file"
                style="display: none"
                :accept="accept"
                @change="_change($event)"
              >
            </div>-->
      <drop-or-select-file :accept="accept" :text="text" v-on="$listeners" />
    </v-card>
  </v-dialog>
</template>

<script>
import DropOrSelectFile from '~/components/import/DropOrSelectFile';

export default {
  name: 'DropOrSelectFileModal',
  components: { DropOrSelectFile },
  props: {
    value: Boolean,
    accept: String,
    text: String,
  },
  data() {
    return {
      dragOver: false,
    };
  },
  computed: {
    dropOrUpload: {
      set(v) {
        this.$emit('input', v);
      },
      get() {
        return this.value;
      },
    },
  },
  methods: {
    /*    _change(event) {
      const files = event.target.files
      if (files && files[0]) {
        this.$emit('file', files[0])
        event.target.value = ''
      }
    },
    dropHandler(ev) {
      this.dragOver = false
      let file
      if (ev.dataTransfer.items) {
        // Use DataTransferItemList interface to access the file(s)
        if (ev.dataTransfer.items.length && ev.dataTransfer.items[0].kind === 'file') {
          file = ev.dataTransfer.items[0].getAsFile()
        }
      } else if (ev.dataTransfer.files.length) {
        file = ev.dataTransfer.files[0]
      }

      if (this.accept && !this.accept.split(',').some(ext => file.name.endsWith(ext.trim()))) {
        return this.$toast.error(`Dopped file is not an accepted file type. The accepted file types are ${this.accept}!`).goAway(3000)
      }
      if (file) {
        this.$emit('file', file)
      }
    },
    dragOverHandler(ev) {

      // Prevent default behavior (Prevent file from being opened)
      ev.preventDefault()
    } */
  },
};
</script>

<style scoped>
/*.nc-droppable {
  width: 100%;
  min-height: 200px;
  border-radius: 4px;
  border: 2px dashed var(--v-textColor-lighten5);
}*/
</style>