File Upload

.c-file-upload[.-success, .-error, .-loading]
The file upload component is a wrapper around the Fine Uploader library.

WARNING

The fine uploader library is not functional in this demo. Most custom styles are still in plausi/Resources/Public/Stylesheets/Partials/_fine-uploader.scss

Datei in das Feld ziehen

oder klicken um Datei auszuwählen

Show Code

<div class="c-file-upload -error">
  <div class="qq-uploader-selector qq-uploader qq-gallery">
    <div class="qq-upload-drop-area-selector qq-upload-drop-area">
      <i class="c-file-upload__icon"></i>
      <h5 class="c-file-upload__headline">Datei in das Feld ziehen</h5>
    </div>
    <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
    <div class="qq-upload-button-selector qq-upload-button">
      <a class="c-file-upload__description">oder klicken um Datei auszuwählen</a>
    </div>
    <ul class="qq-upload-list-selector qq-upload-list h-hide" role="region" aria-live="polite" aria-relevant="additions removals">
      <li>
        <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
        <button type="button" class="c-link -icon-right -secondary qq-upload-retry-selector qq-upload-retry">
          <span class="fa fa-redo" title="Wiederholen"></span>
        </button>
      </li>
    </ul>
    <dialog class="qq-alert-dialog-selector c-panel hidden-print">
      <div class="qq-dialog-message-selector c-alert -warning"></div>
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector c-btn -redesign -secondary">Schließen</button>
      </div>
    </dialog>
    <dialog class="qq-confirm-dialog-selector c-panel hidden-print">
      <div class="qq-dialog-message-selector c-alert -notice"></div>
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector c-btn -redesign -secondary">Nein</button>
        <button type="button" class="qq-ok-button-selector c-btn -redesign -primary">Ja</button>
      </div>
    </dialog>
    <dialog class="qq-prompt-dialog-selector c-panel hidden-print">
      <div class="qq-dialog-message-selector c-alert -notice"></div>
      <input type="text">
      <div class="qq-dialog-buttons">
        <button type="button" class="qq-cancel-button-selector c-btn -redesign -secondary">Abbrechen</button>
        <button type="button" class="qq-ok-button-selector c-btn -redesign -primary">Ok</button>
      </div>
    </dialog>
  </div>
</div>