FileUpload.vue

<template>
  <div>
    <div v-if="batch" class="ui container">
      <div class="ui message">
        {{ $t('Ensure your music files are properly tagged before uploading them.') }}
        <a href="http://picard.musicbrainz.org/" target='_blank'>{{ $t('We recommend using Picard for that purpose.') }}</a>
      </div>
      <file-upload-widget
        :class="['ui', 'icon', 'left', 'floated', 'button']"
        :post-action="uploadUrl"
        :multiple="true"
        :data="uploadData"
        :drop="true"
        extensions="ogg,mp3,flac"
        accept="audio/*"
        v-model="files"
        name="audio_file"
        :thread="3"
        @input-filter="inputFilter"
        @input-file="inputFile"
        ref="upload">
        <i class="upload icon"></i>
        <i18next path="Select files to upload..."/>
    </file-upload-widget>
      <button
        :class="['ui', 'right', 'floated', 'icon', {disabled: files.length === 0}, 'button']"
        v-if="!$refs.upload || !$refs.upload.active" @click.prevent="startUpload()">
        <i class="play icon" aria-hidden="true"></i>
        <i18next path="Start Upload"/>
      </button>
      <button type="button" class="ui right floated icon yellow button" v-else @click.prevent="$refs.upload.active = false">
        <i class="pause icon" aria-hidden="true"></i>
        <i18next path="Stop Upload"/>
      </button>
    </div>
    <div class="ui hidden clearing divider"></div>
    <i18next v-if="batch" path="Once all your files are uploaded, simply head over {%0%} to check the import status.">
      <router-link :to="{name: 'library.import.batches.detail', params: {id: batch.id }}">
        <i18next path="import detail page"/>
      </router-link>
    </i18next>
    <table class="ui single line table">
      <thead>
        <tr>
          <i18next tag="th" path="File name"/>
          <i18next tag="th" path="Size"/>
          <i18next tag="th" path="Status"/>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(file, index) in files" :key="file.id">
          <td>{{ file.name }}</td>
          <td>{{ file.size | humanSize }}</td>
          <td>
            <span v-if="file.error" class="ui red label">
              {{ file.error }}
            </span>
            <i18next v-else-if="file.success" class="ui green label" path="Success"/>
            <i18next v-else-if="file.active" class="ui yellow label" path="Uploading..."/>
            <template v-else>
              <i18next class="ui label" path="Pending"/>
              <button class="ui tiny basic red icon button" @click.prevent="$refs.upload.remove(file)"><i class="delete icon"></i></button>
            </template>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>
import axios from 'axios'
import logger from '@/logging'
import FileUploadWidget from './FileUploadWidget'

export default {
  components: {
    FileUploadWidget
  },
  data () {
    return {
      files: [],
      uploadUrl: '/api/v1/import-jobs/',
      batch: null
    }
  },
  mounted: function () {
    this.createBatch()
  },
  methods: {
    inputFilter (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        let extension = newFile.name.split('.').pop()
        if (['ogg', 'mp3', 'flac'].indexOf(extension) < 0) {
          prevent()
        }
      }
    },
    inputFile (newFile, oldFile) {
      if (newFile && !oldFile) {
        // add
        if (!this.batch) {
          this.createBatch()
        }
      }
      if (newFile && oldFile) {
        // update
      }
      if (!newFile && oldFile) {
        // remove
      }
    },
    createBatch () {
      let self = this
      return axios.post('import-batches/', {}).then((response) => {
        self.batch = response.data
      }, (response) => {
        logger.default.error('error while launching creating batch')
      })
    },
    startUpload () {
      this.$emit('batch-created', this.batch)
      this.$refs.upload.active = true
    }
  },
  computed: {
    batchId: function () {
      if (this.batch) {
        return this.batch.id
      }
      return null
    },
    uploadData: function () {
      return {
        'batch': this.batchId,
        'source': 'file://'
      }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
</style>