feat: project from excel

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/import/dropOrSelectFile.vue

@@ -0,0 +1,105 @@
+<template>
+  <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--text mb-1 mt-2">
+        Select {{ text }} file to Upload
+      </p>
+      <p class="grey--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>
+</template>
+
+<script>
+
+export default {
+  name: 'DropOrSelectFile',
+  props: {
+    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(`Dropped file is not an accepted file type. The accepted file types are ${this.accept}!`).goAway(3000)
+      }
+      if (file) {
+        this.$emit('file', file)
+      }
+    },
+    dragOverHandler(ev) {
+      console.log('File(s) in drop zone')
+
+      // 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>