pinafore/routes/_components/compose/ComposeToolbar.html

<div class="compose-box-toolbar">
  <IconButton
    label="Insert emoji"
    href="#fa-smile"
    on:click="onEmojiClick()"
  />
  <IconButton label="Add media"
              href="#fa-camera"
              on:click="onMediaClick()"
  />
  <IconButton label="Adjust privacy" href="#fa-globe" />
  <IconButton label="Add content warning" href="#fa-exclamation-triangle" />
  <input ref:input
         on:change="onFileChange(event)"
         style="display: none;"
         type="file"
         accept=".jpg,.jpeg,.png,.gif,.webm,.mp4,.m4v,image/jpeg,image/png,image/gif,video/webm,video/mp4">
</div>
<style>
  .compose-box-toolbar {
    grid-area: toolbar;
    align-self: center;
    display: flex;
    align-items: center;
  }
</style>
<script>
  import IconButton from '../IconButton.html'
  import { store } from '../../_store/store'
  import { updateCustomEmojiForInstance } from '../../_actions/emoji'
  import { importDialogs } from '../../_utils/asyncModules'

  export default {
    components: {
      IconButton
    },
    store: () => store,
    methods: {
      async onEmojiClick() {
        /* no await */ updateCustomEmojiForInstance(this.store.get('currentInstance'))
        let dialogs = await importDialogs()
        dialogs.showEmojiDialog()
      },
      onMediaClick() {
        this.refs.input.click()
      },
      onFileChange(e) {
        let file = e.target.files[0]
      }
    }

  }
</script>