ANWENDUNGSMODULE / PHASE 8

Dateien auswählen. Überblick behalten.

Dateifeld, Drag-and-drop und lokale Bildvorschau. Dieses Modul wählt Dateien aus; es überträgt oder speichert sie nicht.

Auswahl mit klaren Grenzen

Bis zu drei PNG-, JPEG-, WebP- oder Textdateien, jeweils höchstens 1.048.576 Bytes. Nicht passende Dateien werden erklärt und nicht übernommen. Du kannst ausschließlich erzeugte Beispieldateien verwenden.

Der Beispielbutton erzeugt ein kleines PNG, eine Textdatei und eine abgewiesene EXE-Dateiendung mit harmlosem Textinhalt. Er liest keine Dateien von deinem Gerät.

Deaktiviertes Dateifeld

Archivbeleg

Disabled wird respektiert; diese Auswahl lässt sich nicht verändern.

1. Dateifeld und Grenzen einfügen

Das native Dateifeld funktioniert auch ohne das optionale Modul. multiple erlaubt mehrere Dateien. data-r-max-files begrenzt ihre Anzahl und data-r-max-size die Größe jeder einzelnen Datei in Bytes. Diese Regeln sind eine Bedienhilfe und keine Sicherheitsprüfung der Dateiinhalte.

HTML

<link rel="stylesheet" href="/assets/rittek.css">
<link rel="stylesheet" href="/assets/upload.css">

<div data-r-upload data-r-max-files="3"
     data-r-max-size="1048576">
  <label for="project-files">Projektdateien</label>
  <input id="project-files" name="attachments"
         type="file" multiple
         accept=".png,.jpg,.jpeg,.webp,.txt">
</div>

2. Das Modul initialisieren

Dieses Script ist ein ES-Modul. Die Auswahl bleibt im nativen Dateifeld und ist damit für ein eigenes Formular verfügbar. Dateien aus der Liste entfernen heißt auch, sie aus input.files und dem daraus erzeugten FormData zu entfernen.

HTML

<script type="module">
  import {initUploads} from '/assets/modules/upload.js';

  const uploads = initUploads(document);
  const first = uploads.controls[0];

  console.log(first.getFiles()); // Aktuelle Auswahl
  // first.remove(0);          // Erste Datei entfernen
  // first.clear();            // Auswahl leeren
  // uploads.destroy();        // Listener / Vorschauen aufräumen
</script>

JavaScript

document.addEventListener('rittek:uploadchange', event => {
  const {files, rejected, source} = event.detail;
  // Nur aktuelle Browser-Dateiobjekte; kein automatischer Versand.
  console.log(files.length, rejected.length, source);
});

Was das Modul macht – und was offen bleibt

Es verarbeitet Auswahl, Anzahl-/Größen-/Typregeln, Entfernen, Reset und lokale Bildvorschauen. Doppelte Metadaten (Name, Größe, Typ und Änderungszeit) gelten als bereits ausgewählt. SVG-Dateien werden nicht als Bildvorschau gerendert. Jede erzeugte Vorschau-URL wird beim Ersetzen, Entfernen, Reset oder Destroy freigegeben.

Für Drag-and-drop und Einzelentfernung wird eine schreibbare FileList über DataTransfer benötigt. Fehlt diese Browserfunktion, bleibt die native Auswahl mit vollständigem Leeren verfügbar. Ein ungültiger nativer Batch wird dann insgesamt geleert, damit Anzeige und Formularwert nicht auseinanderlaufen.

Ein echter Upload, Fortschrittswerte für Übertragung und ein Serveradapter sind bewusst nicht enthalten. Für eigene Anwendungen müssen Dateiinhalte, Dateinamen, Größe, Berechtigung und Speicherung serverseitig geprüft werden. Die Browserprüfung kann das nicht ersetzen.