audiobookshelf/client/components/modals/UploadImageModal.vue

<template>
  <modals-modal v-model="show" name="upload-image" :width="500" :height="'unset'">
    <div ref="container" class="w-full rounded-lg bg-primary box-shadow-md overflow-y-auto overflow-x-hidden" style="max-height: 80vh">
      <div class="flex items-center">
        <div class="w-40 pr-2 pt-4" style="min-width: 160px">
          <ui-file-input ref="fileInput" @change="fileUploadSelected">Upload Cover</ui-file-input>
        </div>
        <form @submit.prevent="submitForm" class="flex flex-grow">
          <ui-text-input-with-label v-model="imageUrl" label="Cover Image URL" />
          <ui-btn color="success" type="submit" :padding-x="4" class="mt-5 ml-3 w-24">Update</ui-btn>
        </form>
      </div>
      <div v-if="previewUpload" class="absolute top-0 left-0 w-full h-full z-10 bg-bg p-8">
        <p class="text-lg">Preview Cover</p>
        <span class="absolute top-4 right-4 material-symbols text-2xl cursor-pointer" @click="resetCoverPreview">close</span>
        <div class="flex justify-center py-4">
          <covers-preview-cover :src="previewUpload" :width="240" />
        </div>
        <div class="absolute bottom-0 right-0 flex py-4 px-5">
          <ui-btn :disabled="processingUpload" class="mx-2" @click="resetCoverPreview">Clear</ui-btn>
          <ui-btn :loading="processingUpload" color="success" @click="submitCoverUpload">Upload</ui-btn>
        </div>
      </div>
    </div>
  </modals-modal>
</template>

<script>
export default {
  props: {
    value: Boolean,
    entity: String,
    entityId: String
  },
  data() {
    return {
      imageUrl: null,
      previewUpload: null,
      processingUpload: false
    }
  },
  watch: {
    value(newVal) {
      if (newVal) this.init()
    }
  },
  computed: {
    show: {
      get() {
        return this.value
      },
      set(val) {
        this.$emit('input', val)
      }
    }
  },
  methods: {
    init() {},
    fileUploadSelected() {
      this.previewUpload = URL.createObjectURL(file)
      this.selectedFile = file
    },
    resetCoverPreview() {
      if (this.$refs.fileInput) {
        this.$refs.fileInput.reset()
      }
      this.previewUpload = null
      this.selectedFile = null
    },
    submitCoverUpload() {
      this.processingUpload = true
      var form = new FormData()
      form.set('cover', this.selectedFile)

      this.$axios
        .$post(`/api/${this.entity}/${this.entityId}/cover`, form)
        .then((data) => {
          if (data.error) {
            this.$toast.error(data.error)
          } else {
            this.$toast.success('Cover Uploaded')
            this.resetCoverPreview()
          }
          this.processingUpload = false
        })
        .catch((error) => {
          console.error('Failed', error)
          var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
          this.$toast.error(errorMsg)
          this.processingUpload = false
        })
    },
    async submitForm() {
      this.processingUpload = true

      var success = await this.$axios.$post(`/api/${this.entity}/${this.entityId}/cover`, { url: this.imageUrl }).catch((error) => {
        console.error('Failed to download cover from url', error)
        var errorMsg = error.response && error.response.data ? error.response.data : 'Unknown Error'
        this.$toast.error(errorMsg)
        return false
      })

      this.processingUpload = false
    }
  }
}
</script>