Fixes #5971 -- Fix file uploads across various app controls.

frontend/vue/components/Stations/Media/Form/AlbumArt.vue

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

frontend/vue/components/Stations/Podcasts/Common/Artwork.vue

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

frontend/vue/components/Stations/Streamers/Form/Artwork.vue

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