Skip to content

Decode by Drag&Drop

With the QrcodeDropZone component you can also drag-and-drop images that should be scanned. Use it as a standalone feature or as a fallback for desktop users.

Source

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

    <p
      v-if="error !== null"
      class="drop-error"
    >
      {{ error }}
    </p>

    <qrcode-drop-zone
      @detect="onDetect"
      @dragover="onDragOver"
      @error="logErrors"
    >
      <div
        class="drop-area"
        :class="{ dragover: dragover }"
      >
        DROP SOME IMAGES HERE
      </div>
    </qrcode-drop-zone>
  </div>
</template>

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

export default {
  components: { QrcodeDropZone },

  data() {
    return {
      result: null,
      error: null,
      dragover: false
    }
  },

  methods: {
    onDetect(detectedCodes) {
      console.log(detectedCodes)

      this.result = JSON.stringify(detectedCodes.map((code) => code.rawValue))
    },

    logErrors(error) {
      if (error.name === 'DropImageFetchError') {
        this.error = "Sorry, you can't load cross-origin images :/"
      } else if (error.name === 'DropImageDecodeError') {
        this.error = "Ok, that's not an image. That can't be decoded."
      } else {
        this.error = 'Ups, what kind of error is this?! ' + error.message
      }
    },

    onDragOver(isDraggingOver) {
      this.dragover = isDraggingOver
    }
  }
}
</script>

<style>
.drop-area {
  height: 300px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  padding: 10px;

  background-color: #3c3c43;
}

.dragover {
  background-color: #10b981;
}

.drop-error {
  color: red;
  font-weight: bold;
}
</style>

Released under the MIT License.