Decode by Upload

Finally, with QrcodeCapture comes another component which allows image scanning via classic file upload. Nothing is actually uploaded. Everything is happening client-side.

If you are on mobile and your browser supports it, you are not prompted with a file dialog but with your camera. So you can directly take the picture to be uploaded. Adjust this behavior with the following dropdown:

Source

<template>
  <div>
    <p>
      Capture:
      <select v-model="selected">
        <option v-for="option in options" :key="option.text" :value="option">
          {{ option.text }}
        </option>
      </select>
    </p>

    <hr/>

    <p class="decode-result">Last result: <b>{{ result }}</b></p>

    <qrcode-capture @decode="onDecode" :capture="selected.value" />
  </div>
</template>

<script>
import { QrcodeCapture } from '../../../../src'

export default {

  components: { QrcodeCapture },

  data () {
    const options = [
      { text: "rear camera (default)", value: "environment" },
      { text: "front camera", value: "user" },
      { text: "force file dialog", value: false },
    ]

    return {
      result: '',
      options,
      selected: options[0]
    }
  },

  methods: {
    onDecode (result) {
      this.result = result
    }
  }
}
</script>