Pinafore-Web-Client-Frontend/src/routes/_components/compose/ComposeFileDrop.html

<file-drop multiple class="file-drop file-drop-realm-{realm}" accept={mediaAccept} ref:fileDrop >
  <div class="file-drop-info">
    <div class="file-drop-info-text">
      <span class="file-drop-info-text-valid">{intl.dropToUpload}</span>
      <span class="file-drop-info-text-invalid">{intl.invalidFileType}</span>
    </div>
  </div>
  <slot></slot>
</file-drop>
<style>
  .file-drop {
    display: block;
    position: relative;
    max-width: 100%;
    width: 100%;
  }

  .file-drop-info {
    display: none;
    pointer-events: none;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 6000;
    justify-content: center;
    align-items: center;
  }

  .file-drop-info-text {
    font-size: 1.2em;
    color: var(--button-text);
    padding: 10px 20px;
    border: 2px dashed var(--button-text);
    border-radius: 6px;
  }

  .file-drop-realm-dialog {
    max-height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }

  .file-drop-realm-dialog::-webkit-scrollbar {
    display: none;
  }

  :global(.file-drop.drop-valid .file-drop-info, .file-drop.drop-invalid .file-drop-info) {
    display: flex;
    background: var(--file-drop-mask);
  }

  :global(.file-drop.drop-valid .file-drop-info-text-invalid, .file-drop.drop-invalid .file-drop-info-text-valid) {
    display: none;
  }
</style>
<script>
  import { mediaAccept } from '../../_static/media.js'
  import { doMediaUpload } from '../../_actions/media.js'
  if (process.browser) {
    require('file-drop-element')
  }
  export default {
    oncreate () {
      this.onFileDrop = this.onFileDrop.bind(this)
      this.refs.fileDrop.addEventListener('filedrop', this.onFileDrop)
    },
    ondestroy () {
      this.refs.fileDrop.removeEventListener('filedrop', this.onFileDRop)
    },
    data: () => ({
      mediaAccept
    }),
    methods: {
      async onFileDrop (e) {
        const { files } = e
        const { realm } = this.get()
        for (const file of files) { // upload one at a time to avoid hitting limits
          await doMediaUpload(realm, file)
        }
      }
    }
  }
</script>