Specifying Accepted File Types

This will tell the file chooser to default to showing only images and will get forwarded to a hidden <input type="file"> in the shadow root.

HTML

<rhino-editor accept="image/*"></rhino-editor>

Caution

Users can still override the behavior and upload any file. It is recommended to sanitize files on your server, and also read the section below of preventing file uploads.

Preventing Uploads

JavaScript

function pngOnly (event) {
  if (event.file.type !== 'image/png') {
    event.preventDefault()
  }
}
document.querySelector("#png-only").addEventListener('rhino-file-accept', pngOnly)

HTML

<rhino-editor id="png-only"></rhino-editor>

Styling the toolbar

Serialize to JSON