ui/src/form/uploader.js

/**
 * {上传组件}
 * @author yutent<yutent.io@gmail.com>
 * @date 2023/04/28 16:14:10
 */

import { css, html, Component, bind, unbind, styleMap } from 'wkit'
import { resolveFiles, parseSize, filename } from '../base/fs.js'
import '../base/icon.js'

function uuid() {
  return Math.random().toString(16).slice(2)
}

class Uploader extends Component {
  static props = {
    value: [],
    tips: 'str!',
    accept: '*/*',
    maxSize: 0,
    limit: 0,
    grid: false,
    drag: false,
    multiple: false,
    disabled: false
  }

  static styles = [
    css`
      :host {
        display: flex;
        width: 100%;
        font-size: 14px;
      }

      .container {
        position: relative;
        width: 100%;
        padding: 6px 0;
        -webkit-user-select: none;
        user-select: none;

        --wc-icon-size: 14px;
      }

      .tips,
      .error {
        display: block;
        line-height: 1.5;
        font-size: 12px;
        font-style: normal;
      }
      .error {
        color: var(--color-red-1);
        background: none;
      }
      .upload-button {
        position: relative;
        display: inline-flex;
        justify-content: center;
        align-items: center;
        width: 108px;
        height: 32px;
        gap: 4px;
        border: 1px solid var(--color-grey-2);
        border-radius: 3px;
        cursor: pointer;
        transition: background 0.1s linear, border-color 0.1s linear,
          color 0.1s linear;

        &:hover {
          border-color: var(--color-grey-1);
        }
        &:active {
          background: var(--color-plain-1);
        }

        &.limited {
          background: var(--color-disabled-background);
          opacity: 0.6;
          cursor: not-allowed;
        }
      }
      .hidden-input {
        position: absolute;
        left: 0;
        top: 0;
        display: block;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: inherit;

        &::-webkit-file-upload-button {
          display: none;
        }
      }
    `,
    css`
      .file-list {
        .item {
          display: flex;
          align-items: center;
          padding: 0 8px;
          line-height: 24px;
          gap: 4px;
          background: none no-repeat center;
          background-size: contain;
          transition: background 0.15s linear;

          &:hover {
            background-color: var(--color-plain-1);

            wc-icon.del {
              opacity: 1;
            }
          }

          .name {
            flex: 1;
          }
          wc-icon {
            flex-shrink: 0;
            transition: opacity 0.15s linear;

            &.del {
              opacity: 0;
              cursor: pointer;
              color: var(--color-red-1);
            }
          }
        }
      }
    `,
    // grid
    css`
      :host([grid]) {
        .container {
          display: flex;
          flex-flow: row-reverse;
          justify-content: start;
          gap: 12px;

          --size: var(--wc-uploader-size, 96px);
          --border-color: var(--wc-uploader-border-color, var(--color-grey-2));
        }

        .tips {
          display: none;
        }

        .upload-button {
          width: var(--size);
          height: var(--size);
          border-radius: 6px;
          --wc-icon-size: 18px;
        }

        .file-list {
          display: flex;
          gap: 12px;

          .item {
            justify-content: center;
            width: var(--size);
            height: var(--size);
            gap: 6px;
            border: 1px solid var(--border-color);
            border-radius: 6px;
            background: none no-repeat center;
            background-size: contain;

            --wc-icon-size: 20px;

            .name {
              display: none;
            }

            wc-icon {
              padding: 3px;
              border: 1px solid rgba(255, 255, 255, 0.25);
              border-radius: 50%;
              background: rgba(64, 64, 64, 0.75);
              color: #fff;
              opacity: 0;
              cursor: pointer;

              &:hover {
                border-color: rgba(255, 255, 255, 0.5);
              }
            }

            &:hover {
              wc-icon {
                opacity: 1;
              }
            }
          }
        }
      }
    `,
    // drag
    css`
      :host([drag]) {
        .container {
          flex-flow: column;
        }
        .action-area {
          width: 100%;
        }
        .tips {
          display: block;
        }

        .upload-button {
          flex-direction: column;
          width: 100%;
          height: 180px;
          border-style: dashed;
          --wc-icon-size: 64px;

          &.in {
            border-color: var(--color-orange-1);
            background: var(--color-drag-background);
          }

          &:hover {
            color: var(--color-grey-3);
          }
        }
      }
    `,
    // disabled
    css`
      :host([disabled]) {
        opacity: 0.6;

        .upload-button {
          background: var(--color-disabled-background);
          cursor: not-allowed;
        }
      }
    `,
    // preview
    css`
      .preview {
        position: fixed;
        left: 0;
        top: 0;
        z-index: 99;
        display: none;
        align-items: center;
        justify-content: center;
        width: 100vw;
        height: 100vh;
        background: rgba(0, 0, 0, 0.3);

        img {
          display: block;
          max-width: 90%;
          max-height: 90%;
          object-fit: contain;
          box-shadow: 0 0 20px #000;
        }
      }
    `
  ]

  #files = []
  #timer

  #toast(msg) {
    this.$refs.err.textContent = msg
    clearTimeout(this.#timer)
    this.#timer = setTimeout(() => {
      this.$refs.err.textContent = ''
    }, 5000)
  }

  #fileChange(ev) {
    let files = [...ev.target.files]

    ev.target.value = ''

    this.#fetchUpload(files)
  }

  #fetchUpload(files) {
    let { limit, maxSize } = this
    let len = files.length

    if (maxSize > 0) {
      files = files.filter(it => it.size <= maxSize)
      if (files.length < len) {
        len = files.length
        this.#toast(`部分文件被忽略, 单文件最大允许 ${parseSize(maxSize)}`)
      }
    }

    if (limit > 0) {
      files = files.slice(0, limit - this.#files.length)
      if (files.length < len) {
        this.#toast(`部分文件被忽略, 最多选择 ${limit} 个文件`)
      }
    }

    if (files.length) {
      files = files.map(file => ({ file, id: uuid(), url: '', stat: 0 }))

      this.#files = this.#files.concat(files)

      this.$emit('upload', {
        files,
        send: args => {
          for (let it of args) {
            it.stat = 1
          }
          this.value = this.#files.map(it => it.url)
        }
      })
      this.$requestUpdate()
    }
  }

  #remove(ev, it, id) {
    for (let i in this.#files) {
      if (it === this.#files[i]) {
        this.#files.splice(i, 1)
        break
      }
    }
    this.$requestUpdate()
  }

  #dragover() {
    if (this.disabled) {
      return
    }
    this.$refs.button.classList.toggle('in', true)
  }

  #dragleave() {
    this.$refs.button.classList.toggle('in', false)
  }

  async #drop(ev) {
    let files
    this.$refs.button.classList.toggle('in', false)

    if (this.disabled) {
      return
    }

    files = await resolveFiles(ev.dataTransfer.items)

    this.#fetchUpload(files.map(it => it.file))
  }

  #preview(ev, item) {
    if (ev.target.name !== 'doc') {
      this.$refs.view.firstElementChild.src =
        item.url || URL.createObjectURL(item.file)
      this.$refs.view.style.display = 'flex'
    }
  }

  #closePreview(ev) {
    this.$refs.view.style.display = ''
  }

  mounted() {}

  render() {
    let { disabled, grid, drag } = this
    let limited = this.limit > 0 && this.#files.length >= this.limit

    return html`
      <main class="container">
        <header class="action-area">
          <div
            ref="button"
            class="upload-button ${limited ? 'limited' : ''}"
            @dragover.prevent=${this.#dragover}
            @dragleave.prevent=${this.#dragleave}
            @drop.prevent=${this.#drop}
          >
            <wc-icon name=${grid && !drag ? 'plus' : 'upload'}></wc-icon>
            <span
              >${drag
                ? '拖拽文件到此处 或 点击选择文件'
                : grid
                ? ''
                : '选择文件'}</span
            >
            <input
              class="hidden-input"
              title
              type="file"
              accept=${this.accept}
              multiple=${this.multiple}
              disabled=${disabled || limited}
              @change=${this.#fileChange}
            />
          </div>

          <cite class="tips">${this.tips}</cite>
          <mark ref="err" class="error"></mark>
        </header>

        <footer
          class="file-list"
          style=${styleMap({ display: this.#files.length ? '' : 'none' })}
        >
          ${this.#files.map(
            it => html`
              <section
                class="item"
                style=${styleMap({
                  backgroundImage: grid ? `url(${it.url})` : ''
                })}
              >
                <wc-icon
                  name=${it.stat === 0 ? 'loading' : grid ? 'search' : 'doc'}
                  @click=${ev => this.#preview(ev, it)}
                ></wc-icon>
                <span class="name" @click=${ev => this.#preview(ev, it)}
                  >${it.file.name}</span
                >
                <wc-icon
                  class="del"
                  name="trash"
                  data-id=${it.id}
                  @click=${ev => this.#remove(ev, it, it.id)}
                ></wc-icon>
              </section>
            `
          )}
        </footer>
      </main>
      <div class="preview" ref="view" @click.self=${this.#closePreview}>
        <img />
      </div>
    `
  }
}

Uploader.reg('uploader')