docker-compose.yml

@@ -0,0 +1,43 @@
+version: '3.3'
+
+services:
+  #  db:
+  #    image: postgres
+  #    container_name: docker-django-vue-db
+  #    environment:
+  #      POSTGRES_USER: user
+  #      POSTGRES_PASSWORD: pass
+  #      POSTGRES_DB: db
+  #    restart: unless-stopped
+  #    ports:
+  #      - "5432:5432"
+  django:
+    build:
+      context: ./backend
+      dockerfile: ./Dockerfile
+    command: python backend/manage.py runserver 0.0.0.0:8000
+    volumes:
+      - .:/app
+    ports:
+      - "8002:8000"
+    networks:
+      - internal
+  #    depends_on:
+  #      - db
+  vue:
+    build:
+      context: ./frontend
+      dockerfile: ./Dockerfile
+    command: nginx -g 'daemon off;'
+    volumes:
+      - .:/app
+    ports:
+      - "8001:80"
+    networks:
+      - internal
+      - external
+    depends_on:
+      - django
+networks:
+  external:
+  internal:

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>

frontend/src/store.js

@@ -250,11 +250,13 @@ export default createStore({
             state.last_load.files = Date.now()
             return data
         },
-        async pushFile({state, dispatch, getters}, {file}) {
+        async pushFile({state, dispatch, getters}, {item_id, file}) {
             const servers = await dispatch('getHomeServers')
-            const data = await servers.post(getters.signAuth, '/api/files/', file)
-            state.files.push(data)
-            return data
+            const data = await servers.post(getters.signAuth, '/api/item_files/'+item_id+'/', file)
+            if (data.mime_type) {
+                state.files.push(data)
+                return data
+            }
         },
         async fetchTags({state, commit, dispatch, getters}) {
             if (state.last_load.tags > Date.now() - 1000 * 60 * 60 * 24) {

nginx.conf

@@ -0,0 +1,37 @@
+worker_processes  2;
+
+events {
+    use           epoll;
+    worker_connections  128;
+}
+
+error_log         logs/error.log info;
+
+http {
+    server_tokens off;
+    include       /etc/nginx/mime.types;
+    charset       utf-8;
+
+    access_log    logs/access.log  combined;
+
+    server {
+        server_name   localhost;
+        listen        0.0.0.0:8080;
+
+        error_page    500 502 503 504  /50x.html;
+
+        location      / {
+            root      frontend/dist/;
+        }
+
+        location      /api/ {
+            proxy_pass http://127.0.0.1:8000/api/;
+        }
+
+        location      /auth/ {
+            proxy_pass http://127.0.0.1:8000/auth/;
+        }
+
+    }
+
+}

proxy.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+
+/usr/sbin/nginx -g "daemon off;pid nginx.pid;" -c nginx.conf -e nginx.log -p $(pwd)