0.2.2 • Published 4 years ago

vue-coe-progress v0.2.2

Weekly downloads
11
License
MIT
Repository
-
Last release
4 years ago

Install

yarn add vue-coe-progress or npm install vue-coe-progress

Example

<template>
  <div id="app">
    <pre v-for="file in $fileList" :key="file.id">
      <button @click="$abortRequest(file.id)">abort</button>

      <span>done: {{ file.done }}</span>
      <span>error: {{ file.error }}</span>
      <span>aborted: {{ file.aborted }}</span>
      <span>progress: {{ file.progress }}</span>
      <span>uploading: {{ file.uploading }}</span>
    </pre>

    <input type="file" multiple @change="setFile">

    <button @click.prevent="$upload">submit</button>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import VueCoeProgress from './VueCoeProgress'

export default Vue.extend({
  name: 'app',

  mixins: [
    VueCoeProgress({
      url: 'http://localhost:3000/',
      headers: { 'Authorization': 'Basic 48120481204120h08fhw' }
    })
  ],

  methods: {
    setFile (event: Event): void {
      const files = (event.target as HTMLInputElement).files

      if (files && files.length) this.$setFiles(files)
    }
  }
});
</script>

server example:

https://gist.github.com/viniazvd/ab0b546a7b1b9171b9aa5e3ee67de63b

States

NametypedefaultAbout
filesObject{}object with file handling states
$fileListArray[]mapped file list

Methods

NameParams
$setStates-
$upload-
$setFilesdata: FileList
$abortRequestid: string
$handleStartid: string, event: Event
$handleFinishid: string, event: Event
$handleProgressid: string, event: ProgressEvent
$handleErrorid: string, message: string, event: Event

disclaimer:

It's a mixin, you can overwrite them! :D

contributors:

0.2.2

4 years ago

0.1.9

4 years ago

0.1.8

4 years ago

0.1.7

4 years ago

0.1.6

4 years ago

0.1.4

4 years ago

0.1.3

4 years ago

0.1.5

4 years ago

0.1.2

4 years ago

0.1.1

4 years ago

0.1.0

4 years ago