Pasting Images into FlexGrid in Vue

Background:

FlexGrid has built-in clipboard support that handles text and numeric data when pasting. You can also capture the paste before it’s processed and handle it yourself, for example, to accept image data from the system clipboard and insert it into a cell.

Steps to Complete:

1. Disable the grid’s built-in clipboard behavior so we can intercept paste events.
2. Attach a paste DOM event handler to catch image paste data from the clipboard.
3. Detect image files in the clipboard data and convert them to a displayable URL.
4. Insert the image into the grid cell and render it with a cell template.

Getting Started:

Disable the grid’s built-in clipboard behavior so we can intercept paste events

By default, pressing Ctrl+V pastes plain text into the grid. We disable this behavior (autoClipboard = false) so we can manually handle the paste event and inspect clipboard content.

<template>
  <wj-flex-grid
    ref="grid"
    :itemsSource="data"
    :autoClipboard="false"
    style="height: 400px; width: 100%;">
    
    <wj-flex-grid-column
      header="Photo"
      binding="image"
      width="120"
      :cellTemplate="imageTemplate">
    </wj-flex-grid-column>

  </wj-flex-grid>

  <p v-if="pasteMessage">{{ pasteMessage }}</p>
</template>

<script>
import { WjFlexGrid, WjFlexGridColumn } from '@mescius/wijmo.vue2.grid';

export default {
  components: { WjFlexGrid, WjFlexGridColumn },

  data() {
    return {
      data: this.getData(),
      pasteMessage: null
    };
  },

  mounted() {
    // Listen for native paste events on the grid host element
    this.$refs.grid.control.hostElement.addEventListener(
      'paste',
      this.onPaste
    );
  },

  methods: {
    getData() {
      return [
        { id: 1, name: 'Item 1', image: '' },
        { id: 2, name: 'Item 2', image: '' }
      ];
    }
  }
};
</script>

• autoClipboard="false" disables default paste behavior.
• We attach a native paste event listener after the component mounts.

Attach a paste DOM event handler to catch image paste data from the clipboard

The browser clipboard API provides access to pasted content. We inspect clipboardData.items to detect image files and convert them into a Base64 URL.

methods: {
  onPaste(e) {
    if (!e.clipboardData) return;

    const items = Array.from(e.clipboardData.items);
    const imageItem = items.find(
      i => i.kind === 'file' && i.type.startsWith('image/')
    );

    if (imageItem) {
      e.preventDefault();

      const blob = imageItem.getAsFile();
      const reader = new FileReader();

      reader.onload = () => {
        const url = reader.result;
        this.insertImageIntoCell(url);
        this.pasteMessage = 'Image pasted successfully.';
      };

      reader.readAsDataURL(blob);
    }
  },

• If an image exists in the clipboard, we prevent default paste behavior.
• FileReader converts the image blob to a Base64 data URL for display.

Detect image files in the clipboard data and convert them to a displayable URL

Once we have the image URL, we insert it into the currently selected grid cell using setCellData.

insertImageIntoCell(imgUrl) {
  const grid = this.$refs.grid.control;
  const sel = grid.selection;

  if (sel.row > -1 && sel.col > -1) {
    grid.setCellData(sel.row, 'image', imgUrl, true);
  }
}

• We retrieve the grid control via this.$refs.grid.control.
• We retrieve the grid control via this.$refs.grid.control.

Insert the image into the grid cell and render it with a cell template

The selected row determines which item receives the image.

computed: {
  imageTemplate() {
    return (ctx) => {
      return ctx.item.image
        ? `<img src="${ctx.item.image}" style="max-width:100px;" />`
        : '';
    };
  }
}

• The template checks if the cell has an image value.
• If present, it renders an <img> element inside the cell.

With this Vue setup:

• Users can press Ctrl+V while a grid cell is selected.
• If the clipboard contains an image, it is inserted into the selected row.
• The grid displays the pasted image directly inside the cell.
• You can extend this approach to validate image size, restrict file types, or upload to a server instead of embedding Base64 data.

Happy coding!