Source: components/file-uploader.vue

<template>
  <div class="row">
    <q-uploader style="width:100%" ref="uploader" class="q-pt-md" multiple batch :label="$t('Select or drop files')"
      @uploaded="uploaded" @failed="failed" :url="uploadURL" :accept="$store.popup.props.accept ?? '*/*'"
      :form-fields="formFields" :headers="[{ name: 'Authorization', value: 'Bearer ' + this.$keycloak.token }]" />
    <div v-if="error" class="text-negative">{{ error }}</div>
    <q-btn class="q-ma-sm" flat no-caps dense icon="upload" :label="$t('Upload')" @click="upload" />
  </div>
</template>

<script>

/**
 * Vue component for file uploader. Not used in the current version of the application.
 * @component
 * @name FileUploader
 * @example
 * <FileUploader />
 */

export default {
  name: "FileUploader",
  data() {
    return {
      uploadURL: null,
      error: null
    };
  },
  mounted() {
    this.copyObject(this.$store.popup.props, this, true);
    this.uploadURL = this.axios.API.defaults.baseURL + this.$store.popup.props.uploadURL;
  },
  methods: {
    formFields(files) {
      // convert object this.$store.popup.props.params to array a
      let a = [{ "name": "params", value: JSON.stringify(this.$store.popup.props.params) }];
      return a;
    },

    upload() {
      this.uploadURL = this.axios.API.defaults.baseURL + this.$store.popup.props.uploadURL;
      this.error = null;
      this.$refs.uploader.upload();
    },

    uploaded(info) {
      if (this.parent && this.reload) {
        this.parent.reload();
      }
      this.$store.popup.show = false;
    },

    failed(info) {
      this.error = info.xhr.statusText + " " + info.xhr.responseText;
    }

  }
};
</script>