@hazin/vue-pic-video

An easy way to capture and preview files in vue.

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
@hazin/vue-pic-video
Minified + gzip package size for @hazin/vue-pic-video in KB

Readme

vue-pic-video

An easy way to capture and preview files in vue.

Getting Started

Import the component and style it as you wish!

npm i --save @hazin/vue-pic-video
yarn add @hazin/vue-pic-video
import vuePicVideo from '@hazin/vue-pic-video'

Example

<template>
  <div class="hello">
    <vue-pic-video :accept="'image/*'" @preview="previewImage" @value="captureFile">
      <button>Upload image</button>
    </vue-pic-video>
    <img :src="image" width="200px" height="200px" alt="">
    <vue-pic-video :accept="'video/*'" @preview="previewVideo" @value="captureFile">
      <button>Upload video</button>
    </vue-pic-video>
    <video :src="video" width="200px" controls></video>
  </div>
</template>
<script>
import vuePicVideo from '@hazin/vue-pic-video'

export default {
  data () {
    return {
      image: '',
      video: ''
    }
  },
  components: {
    vuePicVideo
  },
  methods: {
    previewImage (preview) { this.image = preview }, // Binds the image to show in <image> tag
    previewVideo (preview) { this.video = preview }, // Binds the video to show in <video> tag
    captureFile: value => { console.log(value) } // Log the file Object
  }
}
</script>

Contributing

Please read CONTRIBUTING.md for details on our code of conduct, and the process for submitting pull requests to us.

Authors

See also the list of contributors who participated in this project.

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.