This commit is contained in:
j3d1 2023-07-01 17:21:32 +02:00
parent cc3fec7347
commit 4140214c81
5 changed files with 206 additions and 4 deletions

43
docker-compose.yml Normal file
View file

@ -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:

View file

@ -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>

View file

@ -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) {

37
nginx.conf Normal file
View file

@ -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/;
}
}
}

3
proxy.sh Executable file
View file

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