Apiko PUT File

Apiko PUT File

<template lang="pug">
  q-layout

    // NAVIGATION SECTION
    .toolbar( slot="header" )
      q-toolbar-title( :padding="1" ) File Update
    q-tabs( slot="navigation" )
      q-tab( route="/files/put", exact, replace ) go back

    // CONTAINER SECTION
    .row.gutter.auto
      .layout-view
        .layout-padding

          // INPUT SECTION
          .card.auto
            .card-title.bg-secondary.text-white file update
            .card-content
              p.caption
                .stacked-label
                  input.full-width( v-model.trim="id", pattern="^\d{1,10}$", required )
                  label file id
              p.caption
                .stacked-label.hidden
                  input#file( type="file", ref="uploadInput", @change="onUpdate()" )
              button.full-width.secondary.raised( @click="onTriggerUpdate()" ) update file
</template>

<script>
  import axios from 'axios'
  import { Toast } from 'quasar'

  export default {
    data () {
      return {
        urlPUT: 'http://localhost:5000/files/',
        id: null
      }
    },
    methods: {
      onError () {
        Toast.create.negative('File Not Found!')
      },
      onWarning () {
        Toast.create.warning('The ID Field Should Not Be Empty!')
      },
      onSuccess () {
        Toast.create.positive('File Is Successfully Updated!')
      },
      onUpdate () {
        const data = new FormData()
        data.append('foo', 'bar')
        data.append('file', document.getElementById('file').files[0])
        const config = {
          onUploadProgress (progressEvent) {
            return Math.round((progressEvent.loaded * 100) / progressEvent.total)
          }
        }
        axios.put(this.urlPUT + this.id, data, config)
          .then(response => {
            console.log(response)
            this.onSuccess()
          })
          .catch(error => {
            console.log(error)
            this.onError()
          })
      },
      onTriggerUpdate () {
        if (!this.id) {
          this.onWarning()
          return false
        }
        else {
          this.$refs.uploadInput.click()
        }
      }
    }
  }
</script>

<style lang="scss">
  .card {
    & .card-title,
    & label {
      text-transform: capitalize;
    }
  }
</style>