buefy app input file

AppInputFile.vue

<template>
  <div class="container">
    <b-field>
      <b-tooltip
        :label="tooltipLabel"
        position="is-right"
        type="is-dark"
        animated>

        <b-field>
          <b-upload
            :name="name"
            v-model="files"
            :accept="accept"
            @input="onFileSelect">
            <a class="button is-info">
              <b-icon icon="upload" />
              <span v-if="hasFile">
                {{ fileName }}
              </span>
              <span v-else>{{ label }}</span>
            </a>
          </b-upload>

          <p
            v-if="hasFile"
            class="control">
            <button
              title="Clear selected file"
              class="button reset is-info is-outlined"
              @click="onClearFileClick">
              <b-icon icon="close" />
            </button>
          </p>
        </b-field>
      </b-tooltip>
    </b-field>
  </div>
</template>

<script>
export default {
  name: 'AppInputFile',

  props: {
    name: {
      type: String,
      required: true,
    },
    accept: {
      type: String,
      default: null,
    },
    label: {
      type: String,
      default: 'Choose a file...',
    },
    tooltipLabel: {
      type: String,
      default: '',
    },
  },

  data() {
    return {
      files: [],
    }
  },

  computed: {
    hasFile() {
      return this.files && this.files.length > 0
    },
    fileName() {
      if (this.hasFile) {
        return this.files[0].name
      }
      return ''
    },
  },

  methods: {
    emitInputEvent(value) {
      // send images to the parent component
      this.$emit('input', value)
    },

    /* event handlers */
    onClearFileClick() {
      this.files = []

      this.emitInputEvent(this.files)
    },
    onFileSelect() {
      this.emitInputEvent(this.files)
    },
  },
}
</script>

<style scoped>
.container {
  margin-bottom: 0.5rem;
}
</style>