use vue for form submission

2023-05-25 22:47:52 +03:00
parent b5b4f286cf
commit 170cb1ecea
28 changed files with 976 additions and 448 deletions
@@ -0,0 +1,112 @@
+<template>
+  <div
+    class="flex h-20 w-full"
+    @dragover.prevent
+    @drop.prevent="onDropFiles"
+  >
+    <label
+      :for="inputId"
+      class="w-full"
+    >
+      Upload
+      {{ message }}
+    </label>
+    <input
+      :id="inputId"
+      ref="input"
+      :multiple="multiple"
+      :accept="accept"
+      type="file"
+      class="hidden"
+      @change="onSelectFiles"
+    >
+  </div>
+</template>
+
+<script>
+import { DirectUpload } from '@rails/activestorage'
+
+export default {
+  name: 'FileDropzone',
+  props: {
+    message: {
+      type: String,
+      required: true
+    },
+    submissionSlug: {
+      type: String,
+      required: true
+    },
+    accept: {
+      type: String,
+      required: false,
+      default: '*/*'
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ['upload'],
+  computed: {
+    inputId () {
+      return 'el' + Math.random().toString(32).split('.')[1]
+    }
+  },
+  methods: {
+    onDropFiles (e) {
+      this.uploadFiles(e.dataTransfer.files)
+    },
+    onSelectFiles (e) {
+      e.preventDefault()
+
+      this.uploadFiles(this.$refs.input.files).then(() => {
+        this.$refs.input.value = ''
+      })
+    },
+    async uploadFiles (files) {
+      const blobs = await Promise.all(
+        Array.from(files).map(async (file) => {
+          const upload = new DirectUpload(
+            file,
+            '/direct_uploads',
+            this.$refs.input
+          )
+
+          return new Promise((resolve, reject) => {
+            upload.create((error, blob) => {
+              if (error) {
+                console.error(error)
+
+                return reject(error)
+              } else {
+                return resolve(blob)
+              }
+            })
+          }).catch((error) => {
+            console.error(error)
+          })
+        })
+      )
+
+      return await Promise.all(
+        blobs.map((blob) => {
+          return fetch('/api/attachments', {
+            method: 'POST',
+            body: JSON.stringify({
+              name: 'attachments',
+              blob_signed_id: blob.signed_id,
+              submission_slug: this.submissionSlug
+            }),
+            headers: { 'Content-Type': 'application/json' }
+          }).then(resp => resp.json()).then((data) => {
+            return data
+          })
+        })).then((result) => {
+        this.$emit('upload', result)
+      })
+    }
+  }
+}
+</script>