Datei Drag und Drop mit Blazor InputFile

Ich halte ja auch Blazor Schulungen. Der Wert eines Trainings ist nicht (nur) die Wissensvermittlung, sondern auch die optimale Anwendung des Wissens. Also ich vermittle, wenn du das tust, passiert das und ggf ist Option B dann sinnvoller. Mehrwert eben.

Die Frage die sich stellt ist, warum soll man mit Blazor einen Dateiupload machen? Soweit meine Forschungsergebnisse aktuell reichen, macht das nur bedingt Sinn. Ich will ehrlich sein, ich würde File Upload fast immer mit Razor oder einer anderen Form Post Web Technologie lösen.

Allerdings hat so ein Drag Drop Szenario seinen Reiz aus User Sicht. Drag&Drop wird so lalal in Blazor unterstützt. Man darf nie vergessen, das bei der Blazor Server Variante jedes Event mit C# Code zum Server geschickt werden muss. Die Webassembly Variante ist systembedingt ohnehin nicht die schnellste.

Insofern erlaubt Blazor keinen Zugriff auf das Browser DataTransfer Objekt. Es existiert eine gleichnamige .NET 5 Klasse, die allerdings in ihrer eigenen Welt lebt. Man kann damit nur .NET Objekte per Drag&Drop behandeln. Das wollen wir nun mit einem Datei Upload probieren. Aus dem Datei Explorer einfach auf den Browser ziehen.

Zunächst benötigt man einen Bereich bzw Div das per CSS ensprechend gestylt wird um die Effekte Hover oder Drop zu signalisieren

   1:  <style>
   2:      .uploadBereich {
   3:          border: 2px dashed blue;
   4:          background-color: lightblue;
   5:          cursor: pointer;
   6:          min-height: 200px;
   7:      }
   8:   
   9:      .uploadBereich:hover {
  10:       background-color: lightskyblue;
  11:          }
  12:   
  13:      .uploadBereich input[type=file] {
  14:              position: absolute;
  15:              width: 100%;
  16:              height: 100%;
  17:              cursor: pointer;
  18:          }
  19:   
  20:      .uploadBereichEnter {
  21:          background-color: lightsteelblue;
  22:      }
  23:  </style>

Das lässt sich direkt in der Blazor Seite platzieren oder in eine extra CSS Datei. Aber das ist grad nicht Thema,

Spannender ist die mit .NET 5 neue Blazor Komponente. InputFile kapselt

   1:  <div class="uploadBereich @dropstyle">
   2:      <InputFile 
   3:           @OnChange="@OnInputFileChange"
   4:           @ondragenter="HandleDragEnter"
   5:           @ondragleave="HandleDragLeave" />
   6:  </div>

Vermutlich würde man aus optischen Gründen das HTML Input Type File Element in der Praxis ausblenden, zb per CSS Opacitiy. Ich habe es drin gelassen, damit man erkennen kann wie das Blazor Beispiel aufgebaut ist,

dragdrop

Um den Szenenwechsel hinzubekommen, wird die Eigenascht dropstyle per Code manipuliert. Eingebunden als CSS Klasse wird der Inhalt des strings in den Events gesetzt, Allerdings wird die Logik am Server ausgeführt. Also eine Websocket Nachricht hin und her geschickt mit dem gerenderten HTML Schnippsel. Außer das ganze läuft als WASM Webassembly.

   1:  private void HandleDragEnter()
   2:      {
   3:          dropstyle = "uploadBereichEnter";
   4:      }
   5:  private void HandleDragLeave()
   6:      {
   7:          dropstyle = string.Empty;
   8:      }

Dadurch wird im DIV das CSS Attribut neu gesetzt und so die Hintergrundfarbe geändert beim Drag.

In diesem speziellen Beispiel experimentiere ich mit der Blazor Browser Variante. Also gehostet in Webassembly (WASM). Damit könnte man dann Parser für das per Drag und Drop eingespeiste Dokument schreiben und zb nur den Inhalt oder Teile des Inhaltes zum Server hochladen. Ein bestechender Anwendungsfall für eine PDF Dokumentanalyse oder auch was anderes. Um das Konzept zu zeigen einfach den Inhalt einer Textdatei anzeigen lassen.

1: private async Task OnInputFileChange(

InputFileChangeEventArgs e)

   2:  {
   3:    var datei = e.File;
   4:    using (var stream = datei.OpenReadStream(10485760))
   5:    {
   6:      StreamReader reader = new StreamReader(stream);
   7:      done = await reader.ReadToEndAsync();
   8:        ...

Der Parameter für Openstreamread spielt eigentlich keine Rolle. Es gibt das Maximum der Größe an.

Kommentare sind geschlossen