v149 · Input · demo

Media Picker Demo

On Android Chrome 149+, the on-screen keyboard's media picker can insert images directly into contenteditable elements. This demo shows the beforeinput event flow, the DataTransfer object, and generated image previews.

On Android Chrome 149+, tap the media button in your keyboard while the editor below is focused to insert an image directly.
Rich Text Editor — contenteditable with IME media insertion listener
Event Monitor — beforeinput + paste events 0 events
status waiting for input…
Inserted Media Previews with metadata
— no images inserted yet —
MIME Type Support — types the keyboard media picker accepts
MIME TypeStatusNotes
image/jpeg supported Most common — photos from camera roll
image/png supported Screenshots, transparency support
image/gif supported Animated GIFs from sticker packs
image/webp supported Android-native — efficient stickers
image/heic varies Depends on system codec availability
video/* not via IME Use file input or drag-and-drop instead 
// contenteditable element setup
const editor = document.querySelector('[contenteditable]');

// beforeinput fires BEFORE the DOM is modified
editor.addEventListener('beforeinput', e => {
  if (e.inputType === 'insertFromPaste' || e.inputType === 'insertContent') {
    const items = Array.from(e.dataTransfer?.items ?? []);
    const imageItems = items.filter(i => i.kind === 'file' && i.type.startsWith('image/'));

    if (imageItems.length) {
      e.preventDefault(); // take control of insertion
      imageItems.forEach(item => {
        const file = item.getAsFile();
        const url  = URL.createObjectURL(file);
        const img  = document.createElement('img');
        img.src = url;
        img.alt = file.name || 'inserted image';
        // Insert at cursor position
        document.execCommand('insertHTML', false, img.outerHTML);
        showPreview(file, url);
      });
    }
  }
});

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗