j3d1/toolshed
1
0
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2023-11-01 08:20:24 +01:00
parent a7515d366c
commit fa7d5f40a9
5 changed files with 44 additions and 33 deletions
Download patch file Download diff file Expand all files Collapse all files

6
frontend/src/components/AuthenticatedImage.vue
View file

@ -1,5 +1,5 @@
<template>
<img :src="image_data" :alt="owner + '/' + src"/>
<img :src="image_data" :alt="owner + ':' + src"/>
</template>
<style scoped>
@ -42,7 +42,9 @@ export default {
this.servers = await this.getFriendServers({username: this.owner});
const response = await this.servers.getRaw(this.signAuth, this.src);
const mime_type = response.headers.get("content-type");
this.image_data = "data:" + mime_type + ";base64," + btoa(String.fromCharCode(...new Uint8Array(await response.arrayBuffer())));
const base64 = btoa(new Uint8Array(await response.arrayBuffer())
.reduce((data, byte) => data + String.fromCharCode(byte), ""));
this.image_data = "data:" + mime_type + ";base64," + base64;
} catch (e) {
console.log(e);
}

45
frontend/src/components/CombinedFileField.vue
View file

@ -11,10 +11,10 @@
</li>
</ul>
<hr>
<div>
<img v-for="file in only_images(files)" :key="file.id" :src="file.name" :alt="file.name"
class="img-thumbnail" :title="file.mime_type">
<img v-for="file in only_images(item_files)" :key="file.id" :alt="file.name"
<div style="position: relative;">
<authenticated-image v-for="file in only_images(item_files).filter(file => file.owner)" :key="file.id"
:owner="file.owner" :src="file.name" class="img-thumbnail"/>
<img v-for="file in only_images(item_files).filter(file => file.data)" :key="file.id" :alt="file.name"
:src="'data:' + file.mime_type + ';base64,' + file.data" class="img-thumbnail border-info">
<fs-file-source @input="addFiles">
<div class="img-thumbnail btn btn-outline-primary">
@ -26,6 +26,15 @@
<b-icon-camera></b-icon-camera>
</div>
</camera-file-source>
<input type="checkbox" id="file-dropdown" class="invisible-input">
<label class="img-thumbnail btn btn-outline-primary" for="file-dropdown">
<b-icon-plus></b-icon-plus>
</label>
<div class="dropdown-menu">
<authenticated-image v-for="file in only_images(files)" :key="file.id" :src="file.name"
:owner="file.owner"
class="img-thumbnail"/>
</div>
</div>
</drag-drop-file-source>
</template>
@ -41,6 +50,25 @@
width: 100%;
height: 100%;
}
.invisible-input {
display: none;
}
#file-dropdown:checked ~ .dropdown-menu {
display: block;
}
#file-dropdown:checked ~ label {
color: #fff;
background-color: var(--bs-primary);
border-color: var(--bs-primary);
}
#file-dropdown:checked ~ label:hover {
color: var(--bs-primary);
background-color: initial;
}
</style>
<script>
@ -49,11 +77,13 @@ import {mapActions, mapState} from "vuex";
import DragDropFileSource from "@/components/DragDropFileSource.vue";
import FsFileSource from "@/components/FsFileSource.vue";
import CameraFileSource from "@/components/CameraFileSource.vue";
import AuthenticatedImage from "@/components/AuthenticatedImage.vue";
export default {
name: "CombinedFileField",
components: {
...BIcons,
AuthenticatedImage,
DragDropFileSource,
CameraFileSource,
FsFileSource
@ -85,7 +115,6 @@ export default {
});
});
const responses = await Promise.all(jobs);
console.log(responses);
return responses;
},
addFiles(files) {
@ -96,11 +125,9 @@ export default {
}
if (!this.create) {
this.uploadFiles(newfiles).then((uploaded) => {
console.log(uploaded);
this.$emit("change", [...this.item_files, ...uploaded]);
})
}
this.$emit("change", [...this.item_files, ...newfiles]);
console.log(this.item_files);
},
only_images(files) {
@ -108,7 +135,7 @@ export default {
},
whithout_images(files) {
return files.filter(file => !file.mime_type.startsWith("image/"));
},
}
},
mounted() {
this.fetchFiles();