ModelUpload.vue

<template>
  <div class="modal-card">
    <b-progress :value="progress" size="is-large" show-value :type="status">
      {{message}}
    </b-progress>
  </div>
</template>

<script>
export default {
  name: 'ModelUpload',
  props: {
    model: {
      type: Object,
      default: function () {
        return {}
      }
    }
  },
  data () {
    return {
      message: '',
      progress: 0,
      status: 'is-primary',
      stausMessage: '',
      modelId: null
    }
  },
  mounted () {
    this.saveModel()
  },
  methods: {
    setProgress (step) {
      switch (step) {
        case 0:
          this.message = 'Sending description'
          this.progress = 25
          break
        case 1:
          this.message = 'Sending model file'
          this.progress = 50
          break
        case 2:
          this.message = 'Sending custom layers model'
          this.progress = 75
          break
        case 3:
          this.message = 'Upload completed !'
          this.progress = 100
          this.status = 'is-success'
          break
      }
    },
    setError (message) {
      this.message = message
      this.status = 'is-danger'
    },
    async saveModel () {
      this.setProgress(0)
      var response = await this.uploadModel()
      if (response.error) {
        this.setError(response.message)
        return
      } else {
        this.modelId = response.id
      }

      if (this.model.file !== undefined) {
        console.log('Upload model ' + this.model.file)
        this.setProgress(1)
        if (!await this.uploadModelFile()) {
          this.setError('Model upload error')
          return
        }
      }

      if (this.model.customLayers !== undefined) {
        console.log('Upload layers ' + this.model.customLayers)
        this.setProgress(2)
        if (!await this.uploadLayers()) {
          this.setError('Custom layer upload error')
          return
        }
      }

      this.setProgress(3)
    },
    async uploadModel () {
      const url = this.$serverurl + 'models'
      const token = await localStorage.getItem('token')
      try {
        const response = await fetch(url, {
          method: 'POST',
          headers: {
            Accept: 'application/json',
            'Content-Type': 'application/json',
            Authorization: 'Bearer ' + token
          },
          body: JSON.stringify({
            name: this.model.name,
            shortDescription: this.model.shortDescription,
            longDescription: this.model.longDescription,
            performance: this.model.performance,
            tags: this.model.tags,
            customLayers: this.model.customLayers
          })
        })
        return await response.json()
      } catch (error) {
        return null
      }
    },
    async uploadModelFile () {
      const data = new FormData()
      const url = this.$serverurl + 'models?id=' + this.modelId + '/upload'
      const token = await localStorage.getItem('token')

      data.append('model', this.model.file)

      try {
        const response = await fetch(url, {
          method: 'POST',
          headers: {
            Authorization: 'Bearer ' + token
          },
          body: data
        })
        return response !== 200
      } catch (error) {
        return null
      }
    },
    async uploadLayers () {
      const token = await localStorage.getItem('token')
      for (var i = 0; i < this.model.customLayers.length; i++) {
        const layer = this.model.customLayers[i]
        const data = new FormData()
        const url = this.$serverurl + 'models?id=' + this.modelId + '/layer?id=' + i

        console.log('Upload layers ' + i + ' | ' + layer.file)
        if (layer.file === undefined) continue

        data.append('layer', layer.file)

        try {
          const response = await fetch(url, {
            method: 'POST',
            headers: {
              Authorization: 'Bearer ' + token
            },
            body: data
          })
          if (response !== 200) return false
        } catch (error) {
          return false
        }
      }
      return true
    }
  }
}
</script>

<style>

</style>