QrcodeDropZone

Browser Support

The newest API this component depend on is the FileReader API. Vue Native is not supported (see #206).

10+	Yes	Yes	Yes	Yes

Events

detect

• Payload Type: DetectedBarcode[]

You can drag-and-drop image files from your desktop or images embedded into other web pages anywhere in the area the component occupies. The images are directly scanned and positive results are indicated by the detect event. You can also drop multiple images at the same time (still one event per image though). If no QR code can be recognized an empty array is emitted.

The structure of the event payload is the same as for the detect event on QrcodeStream.

error new in v5.0.0

Error events are emitted when a dropped url can't be fetched due to CORS or a dropped file has an unsupported file type.

<qrcode-drop-zone @detect="onDetect">
  <!-- ... -->
</qrcode-drop-zone>

methods: {
  onError (error) {
    if (error.name === 'DropImageFetchError') {
      // drag-and-dropped URL (probably just an <img> element) from different
      // domain without CORS header caused same-origin-policy violation
    } else if (error.name === 'DropImageDecodeError') {
      // drag-and-dropped file is not of type image and can't be decoded
    } else {
      // idk, open an issue ¯\_(ツ)_/¯
    }
  }
}

formats since v5.3.0

• Payload Type: BarcodeDetectorOptions['formats']
• Default: ['qr_code']

The formats prop defines which barcode formats are detected. Supported Formats.

<qrcode-drop-zone :formats="['qr_code', 'code_128']"></qrcode-drop-zone>

dragover

• Payload Type: Boolean

When the user is dragging something over the the component you might want to apply some emphasizing styling. Do that by reacting to the dragover event.

<qrcode-drop-zone @dragover="onDragOver">
  <div :class="{ highlight: draggingOver }">
    <!-- ... -->
  </div>
</qrcode-drop-zone>

data () {
  return {
    draggingOver: false
  }
},

methods: {
  onDragOver (draggingOver) {
    this.draggingOver = draggingOver
  }
}

WARNING

This is a custom event not to be confused with native dragover. If you really need to listen for the DOM event instead, use Vues native event modifier.

decode removed in v5.0.0

Use detect instead.

docs for v4.0.0

Props

no props

Slots

default

This component merely renders a wrapper div. Its height is defined by the content inside so it will have zero height if you don't provide any content.

<qrcode-drop-zone>
  <b>put anything here</b>
</qrcode-drop-zone>