upload.vue

<template>
  <v-sheet>
    <v-card class="pa-2 ma-2">
      <v-container>
        <v-row no-gutters class="justify-center">
          <v-col>
            <VcsLabel html-for="fileInput">
              IFC Datei:
            </VcsLabel>
          </v-col>
          <v-col>
            <VcsTextField id="fileInput" type="file" v-model="state.files" />
          </v-col>
        </v-row>
        <v-row no-gutters class="justify-center">

        </v-row>
        <v-row no-gutters class="justify-center">
          <VcsFormButton id="convertBtn" @click="convert()" :disabled="disable"> Konvertieren </VcsFormButton>
        </v-row>
      </v-container>
    </v-card>
  </v-sheet>
</template>
<script>
import { inject, ref } from 'vue';
import {
  VcsSelect,
  VcsCheckbox,
  VcsRadio,
  VcsFormButton,
  VcsTextField,
  NotificationType,
  VcsFormattedNumber,
  VcsFormSection,
  VcsLabel,
  VcsTextArea,
  VcsSlider,
} from '@vcmap/ui';
import { VContainer, VRow, VForm, VCol } from 'vuetify/lib';
import { name } from '../package.json';

export const windowId = 'upload_ifc_id';

export default {
  name: 'IFC Konvertierung',
  components: {
    VcsFormButton,
    VcsSelect,
    VcsTextField,
    VcsCheckbox,
    VcsRadio,
    VcsFormattedNumber,
    VcsFormSection,
    VcsLabel,
    VcsTextArea,
    VForm,
    VRow,
    VCol,
    VContainer,
    VcsSlider,
  },
  setup(props, { emit }) {
    const app = inject('vcsApp');
    const { pluginState, config } = app.plugins.getByKey(name);
    const disable = ref(false);
    return {
      closeSelf() {
        emit('close');
      },
      convert() {
        const fileInput = document.getElementById("fileInput");
        const fd = new FormData();
        fd.append('file', pluginState.files);
        const req = fetch(config.convertLink, {
          method: 'post',
          body: fd /* or aFile[0]*/
        }); // returns a promise
        let filename = pluginState.files.name.replace(/\.[^/.]+$/, "") + ".glb";
        disable.value = true;
        const convertBtn = document.getElementById("convertBtn");
        convertBtn.innerHTML = " Konvertierung läuft ";

        req.then(function (res) {
          disable.value = false;
          convertBtn.innerHTML = " Konvertieren ";
          emit('close');
          if (res.ok) {
            // status code was 200-299
            app.notifier.add({
              type: NotificationType.SUCCESS,
              message: "Datei erfolgreich konvertiert",
              timeout: 5000,
            });
            return res.blob();
          } else {
            app.notifier.add({
              type: NotificationType.ERROR,
              message: "Ein Fehler ist beim konvertieren aufgetreten, die Konvertierung unterstützt " +
                "Dateien im IFC Format IFC2x3 und IFC4 Add2 TC1. Bitte stellen Sie sicher, dass die Datei " +
                "die korrekte Version hat und nicht korrupt ist. Falls dies der Fall ist dann ist ein " +
                "unbekannter Fehler beim Konvertieren aufgetreten, der nicht behoben werden konnte.",
            });
          }

        }, function (error) {
          app.notifier.add({
              type: NotificationType.ERROR,
              message: "Ein Fehler ist beim konvertieren aufgetreten, die Konvertierung unterstützt " +
                "Dateien im IFC Format IFC2x3 und IFC4 Add2 TC1. Bitte stellen Sie sicher, dass die Datei " +
                "die korrekte Version hat und nicht korrupt ist. Falls dies der Fall ist dann ist ein " +
                "unbekannter Fehler beim Konvertieren aufgetreten, der nicht behoben werden konnte.",
            });
        }).then((blob) => {
          if (blob != null) {
            var url = window.URL.createObjectURL(blob);
            var a = document.createElement('a');
            a.href = url;
            a.download = filename;
            document.body.appendChild(a);
            a.click();
            a.remove();
          }
        })
      },
      disable,
      state: pluginState,
    };
  },
};
</script>