stash

frontend/src/components/CombinedFileField.vue

@@ -0,0 +1,117 @@
+<template>
+    <div class="input-group">
+        <ul>
+            <li v-for="file in files" :key="file.id">
+                {{ file.name }}
+            </li>
+        </ul>
+        <ul>
+            <img v-for="file in files" :key="file.id" :src="file.name" :alt="file.name" class="img-thumbnail">
+        </ul>
+        <fieldset>
+            <legend>Files</legend>
+            <div class="input-group">
+                <input type="file" class="form-control" multiple id="files">
+                <button class="btn btn-outline-secondary" type="button">
+                    <b-icon-trash></b-icon-trash>
+                </button>
+                <button class="btn btn-outline-secondary" type="button" @click="uploadFiles">
+                    <b-icon-upload></b-icon-upload>
+                </button>
+            </div>
+        </fieldset>
+    </div>
+</template>
+
+<style scoped>
+.img-thumbnail {
+    width: 95px;
+    height: 54px;
+    object-fit: cover;
+}
+</style>
+
+<script>
+import * as BIcons from "bootstrap-icons-vue";
+import {mapActions, mapState} from "vuex";
+
+export default {
+    name: "CombinedFileField",
+    data() {
+        return {}
+    },
+    components: {
+        ...BIcons
+    },
+    props: {
+        value: {
+            type: Array,
+            required: true
+        },
+    },
+    model: {
+        prop: "value",
+        event: "input"
+    },
+    computed: {
+        ...mapState(["files"]),
+        /*localValue: {
+            get() {
+                return this.value;
+            },
+            set(value) {
+                this.$emit("input", value);
+                console.log("set", value);
+            }
+        }*/
+    },
+    methods: {
+        ...mapActions(["fetchFiles", "pushFile"]),
+        async uploadFiles() {
+            //const formData = new FormData();
+            const files = document.getElementById("files").files;
+            for (let i = 0; i < files.length; i++) {
+                var reader = new FileReader();
+                const file = files[i];
+                const buffer = await new Promise((resolve, reject) => {
+                    reader.onload = (e) => {
+                        resolve(e.target.result);
+                    };
+                    reader.onerror = (e) => {
+                        reject(e);
+                    };
+                    reader.readAsArrayBuffer(file)
+                });
+                const data = new Uint8Array(buffer);
+                const hash = nacl.crypto_hash(data);
+                //const hex_hash = Array.from(hash)
+                //    .map(b => b.toString(16).padStart(2, "0"))
+                //    .join("");
+                //console.log("name", file.name);
+                //console.log("size", file.size);
+                //console.log("type", file.type);
+                //console.log("hash", hex_hash);
+                var base64 = btoa(
+                    data.reduce((a, b) => a + String.fromCharCode(b), '')
+                );
+                //console.log("base64", base64.length);
+                //console.log("base64", base64);
+                //console.log("base64", typeof base64);
+                //formData.append("files[]", files[i]);
+                await this.pushFile({
+                    file: {
+                        mime_type: file.type,
+                        data: base64,
+                    },
+                    item_id: 1
+                });
+                await this.fetchFiles();
+            }
+            //console.log("formData", formData);
+        }
+    },
+    mounted() {
+        this.fetchFiles();
+    }
+}
+</script>