FileUpload.vue 3.73 KB
Newer Older
Agate's avatar
Agate committed
1 2
<template>
  <div>
Agate's avatar
Agate committed
3
    <div v-if="batch" class="ui container">
Agate's avatar
Agate committed
4
      <file-upload-widget
Agate's avatar
Agate committed
5
        :class="['ui', 'icon', 'left', 'floated', 'button']"
Agate's avatar
Agate committed
6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21
        :post-action="uploadUrl"
        :multiple="true"
        :size="1024 * 1024 * 30"
        :data="uploadData"
        :drop="true"
        extensions="ogg,mp3"
        accept="audio/*"
        v-model="files"
        name="audio_file"
        :thread="3"
        @input-filter="inputFilter"
        @input-file="inputFile"
        ref="upload">
        <i class="upload icon"></i>
        Select files to upload...
    </file-upload-widget>
Agate's avatar
Agate committed
22 23 24
      <button
        :class="['ui', 'right', 'floated', 'icon', {disabled: files.length === 0}, 'button']"
        v-if="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true">
Agate's avatar
Agate committed
25 26 27
        <i class="play icon" aria-hidden="true"></i>
        Start Upload
      </button>
Agate's avatar
Agate committed
28
      <button type="button" class="ui right floated icon yellow button" v-else @click.prevent="$refs.upload.active = false">
Agate's avatar
Agate committed
29 30 31 32
        <i class="pause icon" aria-hidden="true"></i>
        Stop Upload
      </button>
    </div>
Agate's avatar
Agate committed
33
    <div class="ui hidden clearing divider"></div>
Agate's avatar
Agate committed
34
    <p v-if="batch">
Agate's avatar
Agate committed
35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66
      Once all your files are uploaded, simply head over  <router-link :to="{name: 'library.import.batches.detail', params: {id: batch.id }}">import detail page</router-link> to check the import status.
    </p>
    <table class="ui single line table">
      <thead>
        <tr>
          <th>File name</th>
          <th>Size</th>
          <th>Status</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(file, index) in files" :key="file.id">
          <td>{{ file.name }}</td>
          <td>{{ file.size }}</td>
          <td>
            <span v-if="file.error" class="ui red label">
              {{ file.error }}
            </span>
            <span v-else-if="file.success" class="ui green label">Success</span>
            <span v-else-if="file.active" class="ui yellow label">Uploading...</span>
            <template v-else>
              <span class="ui label">Pending</span>
              <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>
Agate's avatar
Agate committed
67
import axios from 'axios'
Agate's avatar
Agate committed
68 69 70 71 72 73 74 75 76 77
import logger from '@/logging'
import FileUploadWidget from './FileUploadWidget'

export default {
  components: {
    FileUploadWidget
  },
  data () {
    return {
      files: [],
Agate's avatar
Agate committed
78
      uploadUrl: '/api/v1/import-jobs/',
Agate's avatar
Agate committed
79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109
      batch: null
    }
  },
  mounted: function () {
    this.createBatch()
  },
  methods: {
    inputFilter (newFile, oldFile, prevent) {
      if (newFile && !oldFile) {
        let extension = newFile.name.split('.').pop()
        if (['ogg', 'mp3'].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
Agate's avatar
Agate committed
110
      return axios.post('import-batches/', {}).then((response) => {
Agate's avatar
Agate committed
111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136
        self.batch = response.data
      }, (response) => {
        logger.default.error('error while launching creating batch')
      })
    }
  },
  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>