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

vue

<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>

Decode by Upload ​

Source ​

Decode by Upload

Source