mirrors/recipes
1
0
Fork 0
mirror of https://github.com/TandoorRecipes/recipes.git synced 2026-01-01 20:28:46 -05:00
Code Issues Packages Projects Releases Wiki Activity

basic user file upload working

Browse Source
This commit is contained in:
vabene1111
2024-12-21 16:03:13 +01:00
parent 679957b48c
commit 64a43d3d40
15 changed files with 157 additions and 119 deletions
Download Patch File Download Diff File Expand all files Collapse all files

87
vue3/src/components/model_editors/UserFileEditor.vue
View File

@@ -1,32 +1,36 @@
<template>
<model-editor-base
:loading="loading"
:loading="loading || fileApiLoading"
:dialog="dialog"
@save="saveObject"
@save="saveFile"
@delete="deleteObject"
@close="emit('close')"
:is-update="isUpdate()"
:model-class="modelClass"
:object-name="editingObjName()">
<v-card-text>
<v-form :disabled="loading">
<v-form :disabled="loading || fileApiLoading">
<v-text-field :label="$t('Name')" v-model="editingObj.name"></v-text-field>
<!-- <v-file-input :label="$t('File')" v-model="editingObj.file" @change="uploadFile()"></v-file-input>-->
<!-- <v-file-input :label="$t('File')" v-model="editingObj.file" @change="uploadFile()"></v-file-input>-->
<v-label> {{ $t('Preview') }}</v-label>
<v-img max-height="25vh" rounded :src="editingObj.preview"></v-img>
<v-row>
<v-col cols="12" md="6">
<v-file-upload v-model="file"></v-file-upload>
</v-col>
<v-col cols="12" md="6">
<v-label> {{ $t('Preview') }}</v-label>
<v-img max-height="25vh" rounded :src="editingObj.preview"></v-img>
<v-btn :href="editingObj.fileDownload" target="_blank" color="success" class="float-right" prepend-icon="fa-solid fa-file-arrow-down">{{ $t('Download') }}</v-btn>
</v-col>
</v-row>
<v-alert v-if="!loading">
<v-alert class="mt-2" v-if="!loading && !fileApiLoading && Object.keys(editingObj).length > 0">
{{ $n(editingObj.fileSizeKb / 1000) }} MB <br/>
{{ editingObj.createdBy.displayName }} <br/>
{{ DateTime.fromJSDate(editingObj.createdAt).toLocaleString(DateTime.DATETIME_SHORT) }}
<template #append>
<v-btn :href="editingObj.fileDownload" target="_blank" color="success" prepend-icon="fa-solid fa-file-arrow-down">{{ $t('Download') }}</v-btn>
</template>
</v-alert>
</v-form>
</v-card-text>
</model-editor-base>
@@ -35,18 +39,15 @@
<script setup lang="ts">
import {onMounted, PropType} from "vue";
import {Keyword, UserFile, UserFileFromJSON} from "@/openapi";
import {onMounted, PropType, shallowRef} from "vue";
import {UserFile} from "@/openapi";
import ModelEditorBase from "@/components/model_editors/ModelEditorBase.vue";
import {useModelEditorFunctions} from "@/composables/useModelEditorFunctions";
import {useI18n} from "vue-i18n";
import {DateTime} from "luxon";
import UserFileField from "@/components/inputs/UserFileField.vue";
import {getCookie} from "@/utils/cookie";
import {VFileUpload} from 'vuetify/labs/VFileUpload'
import {useFileApi} from "@/composables/useFileApi";
import {ErrorMessageType, PreparedMessage, useMessageStore} from "@/stores/MessageStore";
const {t} = useI18n()
const props = defineProps({
item: {type: {} as PropType<UserFile>, required: false, default: null},
itemId: {type: [Number, String], required: false, default: undefined},
@@ -55,53 +56,25 @@ const props = defineProps({
const emit = defineEmits(['create', 'save', 'delete', 'close'])
const {setupState, deleteObject, saveObject, isUpdate, editingObjName, loading, editingObj, modelClass} = useModelEditorFunctions<UserFile>('UserFile', emit)
const {fileApiLoading, createOrUpdateUserFile} = useFileApi()
// object specific data (for selects/display)
const file = shallowRef<File | null>(null)
onMounted(() => {
setupState(props.item, props.itemId)
})
// TODO this is aweful, need to fix but works for now
function uploadFile() {
loading.value = true
let formData = new FormData()
formData.append('file', editingObj.value.file)
formData.append('name', editingObj.value.name)
if (isUpdate()) {
//TODO proper URL finding (sub path setups)
fetch('/api/user-file/' + editingObj.value.id + '/', {
method: 'PUT',
headers: {'X-CSRFToken': getCookie('csrftoken')},
body: formData
}).then(r => { // TODO maybe better use existing URL clients response functions for parsing
r.json().then(r => {
editingObj.value = UserFileFromJSON(r)
})
useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
}).catch(err => {
useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
}).finally(() => {
loading.value = false
})
} else {
//TODO proper URL finding (sub path setups)
fetch('/api/user-file/', {
method: 'POST',
headers: {'X-CSRFToken': getCookie('csrftoken')},
body: formData
}).then(r => { // TODO maybe better use existing URL clients response functions for parsing
r.json().then(r => {
editingObj.value = UserFileFromJSON(r)
})
useMessageStore().addPreparedMessage(PreparedMessage.CREATE_SUCCESS)
}).catch(err => {
useMessageStore().addError(ErrorMessageType.CREATE_ERROR, err)
}).finally(() => {
loading.value = false
})
}
function saveFile() {
createOrUpdateUserFile(editingObj.value.name, file.value, editingObj.value.id).then(r => {
editingObj.value = r
useMessageStore().addPreparedMessage(PreparedMessage.UPDATE_SUCCESS)
}).catch(err => {
useMessageStore().addError(ErrorMessageType.UPDATE_ERROR, err)
})
}