Skip to content

Datei Upload

Das Datei Upload-Feld ermöglicht Benutzern das einfache Hochladen von Dateien direkt aus ihrem Dateisystem. Es unterstützt verschiedene Dateitypen und bietet eine benutzerfreundliche Möglichkeit, externe Inhalte wie Dokumente oder Bilder in ein System zu integrieren, während es eine übersichtliche und intuitive Interaktion sicherstellt.

Pflichtfeld

Das <input> Element enthält ein required Attribut.

Ziehen Sie mit Drag & Drop ein Dokument hierher oder verwenden Sie den Button um eine Datei hochzuladen.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<form class="form needs-validation" novalidate>
  <label class="infotitle" for="fileupload">Label</label>
  <div class="element-file floating-label">
    <div class="element-upload">
      <p>
        Ziehen Sie mit Drag &amp; Drop ein Dokument hierher oder verwenden Sie
        den Button um eine Datei hochzuladen.
      </p>
      <input
        type="file"
        id="fileupload"
        class="form-control file-upload"
        name="fileupload"
        required
      />
      <div class="invalid-feedback">Individuelle Fehlermeldung</div>
      <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
    </div>
  </div>
</form>

Optional

Ziehen Sie mit Drag & Drop ein Dokument hierher oder verwenden Sie den Button um eine Datei hochzuladen.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<form class="form needs-validation" novalidate>
  <label class="infotitle" for="fileupload-2">Label</label>
  <div class="element-file floating-label">
    <div class="element-upload">
      <p>
        Ziehen Sie mit Drag &amp; Drop ein Dokument hierher oder verwenden Sie
        den Button um eine Datei hochzuladen.
      </p>
      <input
        type="file"
        id="fileupload-2"
        class="form-control file-upload"
        name="fileupload-2"
      />
      <div class="invalid-feedback">Individuelle Fehlermeldung</div>
      <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
    </div>
  </div>
</form>

Disabled

Das <input> Element enthält ein disabled Attribut.

Ziehen Sie mit Drag & Drop ein Dokument hierher oder verwenden Sie den Button um eine Datei hochzuladen.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<form class="form needs-validation" novalidate>
  <label class="infotitle" for="fileupload-3">Label</label>
  <div class="element-file floating-label">
    <div class="element-upload">
      <p>
        Ziehen Sie mit Drag &amp; Drop ein Dokument hierher oder verwenden Sie
        den Button um eine Datei hochzuladen.
      </p>
      <input
        type="file"
        id="fileupload-3"
        class="form-control file-upload"
        name="fileupload-3"
        disabled
      />
      <div class="invalid-feedback">Individuelle Fehlermeldung</div>
      <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
    </div>
  </div>
</form>

Tooltip

Datei Uploads können optional mit einem Tooltip ergänzt werden. Dieser wird durch ein Icon gekennzeichnet. Der Text kann sowohl mehrzeilig sein, als auch einen Link enthalten und ist bei Hover ersichtlich.

Ziehen Sie mit Drag & Drop ein Dokument hierher oder verwenden Sie den Button um eine Datei hochzuladen.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung 
<form class="form needs-validation" novalidate>
  <label class="infotitle" for="fileupload-4">Label</label>
  <div class="element-file floating-label">
    <div class="element-upload element-tooltip">
      <svg
        class="icon icon-info"
        data-bs-custom-class="wko-tooltip"
        data-bs-toggle="tooltip"
        data-bs-html="true"
        data-bs-title="Tooltip, dieser kann sowohl mehrzeilig sein, als auch einen <a href='#'>Link</a> enthalten."
      >
        <use xlink:href="/assets/icons/sprite.Br4IYrdf.svg#icon-info"></use>
      </svg>
      <p>
        Ziehen Sie mit Drag &amp; Drop ein Dokument hierher oder verwenden Sie
        den Button um eine Datei hochzuladen.
      </p>
      <input
        type="file"
        id="fileupload-4"
        class="form-control file-upload"
        name="fileupload-4"
      />
      <div class="invalid-feedback">Individuelle Fehlermeldung</div>
      <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
    </div>
  </div>
</form>

Infotext

Datei Uploads können optional mit einem Infotext unterhalb des Eingabefeldes ergänzt werden.

Ziehen Sie mit Drag & Drop ein Dokument hierher oder verwenden Sie den Button um eine Datei hochzuladen.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung

Infotext ergänzend zum Eingabefeld 

<form class="form needs-validation" novalidate>
  <label class="infotitle" for="fileupload-5">Label</label>
  <div class="element-file floating-label">
    <div class="element-upload">
      <p>
        Ziehen Sie mit Drag &amp; Drop ein Dokument hierher oder verwenden Sie
        den Button um eine Datei hochzuladen.
      </p>
      <input
        type="file"
        id="fileupload-5"
        class="form-control file-upload"
        name="fileupload-5"
      />
      <div class="invalid-feedback">Individuelle Fehlermeldung</div>
      <div class="valid-feedback">Individuelle Erfolgsmeldung</div>
    </div>
    <p class="infotext">Infotext ergänzend zum Eingabefeld</p>
  </div>
</form>

Validierung

Ziehen Sie mit Drag & Drop ein Dokument hierher oder verwenden Sie den Button um eine Datei hochzuladen.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung

Infotext ergänzend zum Eingabefeld

Ziehen Sie mit Drag & Drop ein Dokument hierher oder verwenden Sie den Button um eine Datei hochzuladen.

Individuelle Fehlermeldung
Individuelle Erfolgsmeldung

Infotext ergänzend zum Eingabefeld