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

<template>
    <b-tab :title="$gettext('Artwork')">
        <b-form-group>
            <b-row>
                <b-col md="8">
                    <b-form-group label-for="edit_form_art">
                        <template #label>
                            {{ $gettext('Select PNG/JPG artwork file') }}
                        </template>
                        <template #description>
                            {{
                                $gettext('This image will be used as the default album art when this streamer is live.')
                            }}
                        </template>
                        <b-form-file id="edit_form_art" accept="image/jpeg, image/png"
                                     v-model="uploadedFile"></b-form-file>
                    </b-form-group>
                </b-col>
                <b-col md="4" v-if="src && src !== ''">
                    <b-img :src="src" :alt="$gettext('Artwork')" rounded fluid></b-img>

                    <div class="buttons pt-3">
                        <b-button block variant="danger" @click="deleteArt">
                            {{ $gettext('Clear Artwork') }}
                        </b-button>
                    </div>
                </b-col>
            </b-row>
        </b-form-group>
    </b-tab>
</template>

<script setup>
import {computed, ref, toRef, watch} from "vue";
import {useAxios} from "~/vendor/axios";

const props = defineProps({
    modelValue: Object,
    artworkSrc: String,
    editArtUrl: String,
    newArtUrl: String,
});

const emit = defineEmits(['update:modelValue']);

const artworkSrc = toRef(props, 'artworkSrc');
const localSrc = ref(null);

const src = computed(() => {
    return localSrc.value ?? artworkSrc.value;
});

const {axios} = useAxios();

const uploadedFile = ref(null);
watch(uploadedFile, (file) => {
    if (null === file) {
        return;
    }

    let fileReader = new FileReader();
    fileReader.addEventListener('load', () => {
        localSrc.value = fileReader.result;
    }, false);
    fileReader.readAsDataURL(file);

    let url = (props.editArtUrl) ? props.editArtUrl : props.newArtUrl;
    let formData = new FormData();
    formData.append('art', file);

    axios.post(url, formData).then((resp) => {
        emit('update:modelValue', resp.data);
    });
});

const deleteArt = () => {
    if (props.editArtUrl) {
        axios.delete(props.editArtUrl).then(() => {
            localSrc.value = null;
        });
    } else {
        localSrc.value = null;
    }
}
</script>

<script>
export default {
    model: {
        prop: 'modelValue',
        event: 'update:modelValue'
    }
};
</script>