multiupload

multiupload.js

const Fieldtype = {
  mixins: [window.Storyblok.plugin],
  template: `
<div class="uk-clearfix">
  <input class="uk-hidden" type="file" multiple="multiple" @change="changeFiles($event)" />
  
  <div class="uk-flex uk-margin-small-bottom" v-for="(key, item) in model.files">
    <img class="image" :src="item.url.replace('a.storyblok.com', 'img2.storyblok.com/160x90/filters:fill(auto,0)')">
    <input type="text" class="uk-form-small uk-flex-item-auto" v-model=item.url>
    <button @click.prevent="removeFile(key)" class="uk-button uk-button-small uk-margin-small-left"><i class="uk-icon-close"></i></button>
  </div>

  <div class="multiupload__droparea uk-placeholder" v-on:dragover="$event.preventDefault()" v-on:drop="changeFiles($event)">
    <button @click.prevent="removeFileFromUpload(key)" v-for="(key, item) in to_upload" class="uk-button uk-button-small multiupload__droparea-item">{{item.name}} <i class="uk-icon uk-icon-close"></i></button>
    <span v-if="to_upload.length == 0">Drop Files Here</span>
  </div>
  
  <div v-if="progress > -1">
    Uploading...
  </div>
  <button class="uk-button uk-button-small uk-margin-small-top uk-float-right" @click.prevent="startUpload">Start Upload</button>
</div>
  `,
  data() {
    return {
      progress: -1,
      to_upload: []
    }
  },
  methods: {
    initWith: function() {
      return {
        plugin: 'multiupload',
        files: []
      }
    },
    startUpload: function() {
      this.progress = 0
      this.uploadNext()
    },
    uploadNext: function() {
      if (this.to_upload.length > this.progress) {
        this.uploadFile(this.to_upload[this.progress])
      } else {
        this.progress = -1
        this.to_upload = []
      }
    },
    uploadFile: function(file) {
      this.api(`spaces/${this.spaceId}/assets`)
        .save({ filename: file.name }).then(res => {
        let form_data = new FormData()
        let xhr = new XMLHttpRequest()

        for (var key in res.data.fields) {
          form_data.set(key, res.data.fields[key])
        }

        form_data.set('file', file)
        xhr.onreadystatechange = () => {
          if (xhr.readyState === 4) {
            if (xhr.status == 204 || xhr.status == 200 || xhr.status == 201) {
              this.model.files.push({ url: res.data.pretty_url })
              this.progress++
              setTimeout(() => { this.uploadNext() }, 0)
            } else {
              console.log('Multiupload: Error during upload with status: ', xhr.status);
            }
          }
        }
        xhr.open('POST', res.data.post_url)
        xhr.send(form_data)
      })
    },
    changeFiles: function(event) {
      event.preventDefault()
      
      let files = event.target.files || event.dataTransfer.files

      for (var i = 0; i < files.length; i++) {
        this.to_upload.push(files[i])
      }
    },
    removeFileFromUpload: function(index) {
      this.to_upload.splice(index, 1)
    },
    removeFile: function(index) {
      this.model.files.splice(index, 1)
    }
  },
  watch: {
    'model': {
      handler: function (value) {
        this.$emit('changed-model', value)
      },
      deep: true
    }
  }
}