File Upload

Based on Fine Uploader in production

TIP

Based on Fine Uploader.

Show Code

html

<div id="fine-uploader-gallery" />

text/template

<script type="text/template" id="qq-template-gallery">
  <div class="c-file-uploader">
    <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
      <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
        <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar" />
      </div>
      <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
        <span class="qq-upload-drop-area-text-selector" />
      </div>
      <div class="qq-upload-button-selector qq-upload-button">
        <div>Upload a file</div>
      </div>
      <span class="qq-drop-processing-selector qq-drop-processing">
        <span>Processing dropped files...</span>
        <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner" />
      </span>
      <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
        <li>
          <span role="status" class="qq-upload-status-text-selector qq-upload-status-text" />
          <div class="qq-progress-bar-container-selector qq-progress-bar-container">
            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar" />
          </div>
          <span class="qq-upload-spinner-selector qq-upload-spinner" />
          <div class="qq-thumbnail-wrapper">
            <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale />
          </div>
          <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">
            X
          </button>
          <button type="button" class="qq-upload-retry-selector qq-upload-retry">
            <span class="qq-btn qq-retry-icon" aria-label="Retry" />
            Retry
          </button>

          <div class="qq-file-info">
            <div class="qq-file-name">
              <span class="qq-upload-file-selector qq-upload-file" />
              <span class="qq-edit-filename-icon-selector qq-edit-filename-icon" aria-label="Edit filename" />
            </div>
            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text" />
            <span class="qq-upload-size-selector qq-upload-size" />
            <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
              <span class="qq-btn qq-delete-icon" aria-label="Delete" />
            </button>
            <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
              <span class="qq-btn qq-pause-icon" aria-label="Pause" />
            </button>
            <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
              <span class="qq-btn qq-continue-icon" aria-label="Continue" />
            </button>
          </div>
        </li>
      </ul>

      <dialog class="qq-alert-dialog-selector">
        <div class="qq-dialog-message-selector" />
        <div class="qq-dialog-buttons">
          <button type="button" class="qq-cancel-button-selector">
            Close
          </button>
        </div>
      </dialog>

      <dialog class="qq-confirm-dialog-selector">
        <div class="qq-dialog-message-selector" />
        <div class="qq-dialog-buttons">
          <button type="button" class="qq-cancel-button-selector">
            No
          </button>
          <button type="button" class="qq-ok-button-selector">
            Yes
          </button>
        </div>
      </dialog>

      <dialog class="qq-prompt-dialog-selector">
        <div class="qq-dialog-message-selector" />
        <input type="text" />
        <div class="qq-dialog-buttons">
          <button type="button" class="qq-cancel-button-selector">
            Cancel
          </button>
          <button type="button" class="qq-ok-button-selector">
            Ok
          </button>
        </div>
      </dialog>
    </div>
  </div>
</script>

javascript

import { asyncResolveFineUploader } from '@patternlab-vite'
const el = document.getElementById('fine-uploader-gallery')
const initSettings = {
  element:    el,
  template:   'qq-template-gallery',
  validation: {
    allowedExtensions: ['jpeg', 'jpg', 'gif', 'png'],
  },
  request: {
    endpoint: '/uploads',
  },
  deleteFile: {
    enabled:  true,
    endpoint: '/uploads',
  },
  chunking: {
    enabled:    true,
    concurrent: {
      enabled: true,
    },
    success: {
      endpoint: '/uploads',
    },
  },
  resume: {
    enabled: true,
  },
  retry: {
    enableAuto: true,
  },
  autoUpload: false,
  // debug:      true,
}
asyncResolveFineUploader()
  .then(() => {
    const qqInstance = new window.qq.FineUploader(initSettings)
  })

Based on uppy beta