mirror of
https://github.com/AzuraCast/AzuraCast.git
synced 2024-06-14 13:16:37 +00:00
Fixes #5971 -- Fix file uploads across various app controls.
This commit is contained in:
parent
f48cab49cf
commit
0408efb656
|
@ -13,63 +13,51 @@
|
|||
<template #label>
|
||||
{{ $gettext('Replace Album Cover Art') }}
|
||||
</template>
|
||||
<b-form-file id="edit_form_art" v-model="artFile" accept="image/*"
|
||||
@input="uploadNewArt"></b-form-file>
|
||||
<b-form-file id="edit_form_art" v-model="artFile" accept="image/*"></b-form-file>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
</b-row>
|
||||
</b-form-group>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import {ref, toRef, watch} from "vue";
|
||||
import {syncRef} from "@vueuse/core";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
export default {
|
||||
name: 'MediaFormAlbumArt',
|
||||
props: {
|
||||
albumArtUrl: String
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
artFile: null,
|
||||
albumArtSrc: null
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
albumArtUrl: {
|
||||
immediate: true,
|
||||
handler(newVal) {
|
||||
this.albumArtSrc = newVal;
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
uploadNewArt() {
|
||||
if (null === this.artFile) {
|
||||
return;
|
||||
}
|
||||
const props = defineProps({
|
||||
albumArtUrl: String
|
||||
});
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('art', this.artFile);
|
||||
const albumArtSrc = ref(null);
|
||||
syncRef(toRef(props, 'albumArtUrl'), albumArtSrc, {direction: 'ltr'});
|
||||
|
||||
this.axios.post(this.albumArtUrl, formData).then(() => {
|
||||
this.reloadArt();
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
this.reloadArt();
|
||||
});
|
||||
},
|
||||
deleteArt() {
|
||||
this.axios.delete(this.albumArtUrl).then(() => {
|
||||
this.reloadArt();
|
||||
}).catch((err) => {
|
||||
console.log(err);
|
||||
this.reloadArt();
|
||||
});
|
||||
},
|
||||
reloadArt() {
|
||||
this.artFile = null;
|
||||
this.albumArtSrc = this.albumArtUrl + '?' + Math.floor(Date.now() / 1000);
|
||||
}
|
||||
const artFile = ref(null);
|
||||
|
||||
const reloadArt = () => {
|
||||
artFile.value = null;
|
||||
albumArtSrc.value = props.albumArtUrl + '?' + Math.floor(Date.now() / 1000);
|
||||
}
|
||||
watch(toRef(props, 'albumArtUrl'), reloadArt);
|
||||
|
||||
const {axios} = useAxios();
|
||||
|
||||
watch(artFile, (file) => {
|
||||
if (null === file) {
|
||||
return;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('art', file);
|
||||
|
||||
axios.post(props.albumArtUrl, formData).finally(() => {
|
||||
reloadArt();
|
||||
});
|
||||
});
|
||||
|
||||
const deleteArt = () => {
|
||||
axios.delete(props.albumArtUrl).finally(() => {
|
||||
reloadArt();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
}}
|
||||
</template>
|
||||
<b-form-file id="edit_form_art" accept="image/jpeg, image/png"
|
||||
@input="uploadNewArt"></b-form-file>
|
||||
v-model="uploadedFile"></b-form-file>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col md="4" v-if="src && src !== ''">
|
||||
|
@ -54,8 +54,10 @@ const src = computed(() => {
|
|||
|
||||
const {axios} = useAxios();
|
||||
|
||||
const uploadNewArt = (file) => {
|
||||
if (!(file instanceof File)) {
|
||||
const uploadedFile = ref(null);
|
||||
|
||||
watch(uploadedFile, (file) => {
|
||||
if (null === file) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -72,7 +74,7 @@ const uploadNewArt = (file) => {
|
|||
axios.post(url, formData).then((resp) => {
|
||||
emit('update:modelValue', resp.data);
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
const deleteArt = () => {
|
||||
if (props.editArtUrl) {
|
||||
|
|
|
@ -13,7 +13,7 @@
|
|||
}}
|
||||
</template>
|
||||
<b-form-file id="edit_form_art" accept="image/jpeg, image/png"
|
||||
@input="uploadNewArt"></b-form-file>
|
||||
v-model="uploadedFile"></b-form-file>
|
||||
</b-form-group>
|
||||
</b-col>
|
||||
<b-col md="4" v-if="src && src !== ''">
|
||||
|
@ -31,7 +31,7 @@
|
|||
</template>
|
||||
|
||||
<script setup>
|
||||
import {computed, ref, toRef} from "vue";
|
||||
import {computed, ref, toRef, watch} from "vue";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
const props = defineProps({
|
||||
|
@ -52,8 +52,9 @@ const src = computed(() => {
|
|||
|
||||
const {axios} = useAxios();
|
||||
|
||||
const uploadNewArt = (file) => {
|
||||
if (!(file instanceof File)) {
|
||||
const uploadedFile = ref(null);
|
||||
watch(uploadedFile, (file) => {
|
||||
if (null === file) {
|
||||
return;
|
||||
}
|
||||
|
||||
|
@ -70,7 +71,7 @@ const uploadNewArt = (file) => {
|
|||
axios.post(url, formData).then((resp) => {
|
||||
emit('update:modelValue', resp.data);
|
||||
});
|
||||
};
|
||||
});
|
||||
|
||||
const deleteArt = () => {
|
||||
if (props.editArtUrl) {
|
||||
|
|
Loading…
Reference in New Issue
Block a user