From 76ed8d58fa6925f60549309aa89a1f5b713d6808 Mon Sep 17 00:00:00 2001
From: John Paul <johnpaul122jpr@gmail.com>
Date: Wed, 15 Jun 2022 17:49:42 -0400
Subject: [PATCH] Create `StatelessFileInput`, use in version.vue (#537)

---
 components/ui/StatelessFileInput.vue | 93 ++++++++++++++++++++++++++++
 pages/_type/_id/version.vue          |  6 +-
 2 files changed, 96 insertions(+), 3 deletions(-)
 create mode 100644 components/ui/StatelessFileInput.vue

diff --git a/components/ui/StatelessFileInput.vue b/components/ui/StatelessFileInput.vue
new file mode 100644
index 00000000..69727cd6
--- /dev/null
+++ b/components/ui/StatelessFileInput.vue
@@ -0,0 +1,93 @@
+<template>
+  <div class="columns">
+    <label class="button" @drop.prevent="handleDrop" @dragover.prevent>
+      <span>
+        <UploadIcon />
+        {{ prompt }}
+      </span>
+      <input
+        type="file"
+        :multiple="multiple"
+        :accept="accept"
+        @change="handleChange"
+      />
+    </label>
+  </div>
+</template>
+
+<script>
+import UploadIcon from '~/assets/images/utils/upload.svg?inline'
+
+export default {
+  name: 'StatelessFileInput',
+  components: {
+    UploadIcon,
+  },
+  props: {
+    prompt: {
+      type: String,
+      default: 'Select file',
+    },
+    multiple: {
+      type: Boolean,
+      default: false,
+    },
+    accept: {
+      type: String,
+      default: null,
+    },
+  },
+  methods: {
+    onChange(addedFiles) {
+      this.$emit('change', addedFiles)
+    },
+    addFiles(filesToAdd) {
+      if (!filesToAdd) return
+
+      if (!this.multiple && filesToAdd.length > 0) {
+        this.onChange([filesToAdd[0]])
+        return
+      }
+
+      this.onChange(filesToAdd)
+    },
+    handleDrop(e) {
+      this.addFiles(e.dataTransfer.files)
+    },
+    handleChange(e) {
+      this.addFiles(e.target.files)
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+label {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: var(--spacing-card-sm) var(--spacing-card-md);
+  margin-bottom: var(--spacing-card-sm);
+}
+
+span {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  gap: 0.5rem;
+  border: 2px dashed var(--color-divider-dark);
+  border-radius: var(--size-rounded-control);
+  padding: var(--spacing-card-md) var(--spacing-card-lg);
+
+  svg {
+    height: 1.25rem;
+  }
+}
+
+input {
+  display: none;
+}
+</style>
diff --git a/pages/_type/_id/version.vue b/pages/_type/_id/version.vue
index 444860e6..598042c8 100644
--- a/pages/_type/_id/version.vue
+++ b/pages/_type/_id/version.vue
@@ -511,7 +511,7 @@
             </button>
           </div>
         </div>
-        <SmartFileInput
+        <StatelessFileInput
           v-if="mode === 'edit' || mode === 'create'"
           multiple
           class="choose-files"
@@ -527,7 +527,7 @@
 <script>
 import Multiselect from 'vue-multiselect'
 import ConfirmPopup from '~/components/ui/ConfirmPopup'
-import SmartFileInput from '~/components/ui/SmartFileInput'
+import StatelessFileInput from '~/components/ui/StatelessFileInput'
 
 import InfoIcon from '~/assets/images/utils/info.svg?inline'
 import TrashIcon from '~/assets/images/utils/trash.svg?inline'
@@ -557,7 +557,7 @@ export default {
     CheckIcon,
     Multiselect,
     PlusIcon,
-    SmartFileInput,
+    StatelessFileInput,
     InfoIcon,
   },
   beforeRouteLeave(to, from, next) {