Das Hochladen von HTML-Dateien funktioniert wirklich gut, sieht aber schrecklich aus. Lassen Sie uns das auf semantische und zugängliche Weise beheben.

Das Thema

Die Dateieingaben sehen schlecht aus.

Schauen Sie sich dieses an, ich habe es überhaupt nicht gestylt. Dies ist der Standardstil für die Dateieingabe in Firefox.

Um es ganz klar zu sagen: Der Code zum Hinzufügen dieser Eingabe zur Seite lautet <input type="file">.

Nun bin ich natürlich immer der Meinung, dass Funktionalität Vorrang vor visuellen Elementen haben sollte, aber wir müssen etwas tun, um diese Eingabe zu gestalten, ohne ihre Funktionalität zu verlieren.

CSS-Stile

Leider ist dies ein kurzer Abschnitt.

Es gibt wirklich nicht viele Eigenschaften, mit denen wir unsere Eingabe formatieren können. Natürlich können wir eine hinzufügen background-coloroder eine neue bereitstellen, font-familyaber wir haben nicht einmal die Möglichkeit, die Schaltfläche „Durchsuchen…“ zu gestalten.

So was jetzt?

Im Allgemeinen ermöglicht uns die Verwendung von browsernativen Elementen die Zugänglichkeit ohne zusätzlichen Aufwand. Wie können wir also diese Eingabe auf der Seite behalten und an ihrer Stelle etwas anderes gestalten?

Etiketten.

Das labelElement wird seit langem anstelle von inputs zum Stylen verwendet. Hier ist ein Markup:

<label class="file-upload">
  <span class="file-upload__text">
    Click or Drag file here...
  </span>
  <input type="file" class="file-upload__input">
</label>

Nachdem wir nun unser Markup haben, können wir die Eingabe etwas gestalten.

.file-upload {
  box-sizing: border-box;
  height: 200px;
  width: 100%;
  background-color: hsl(317, 20%, 80%);
  border: 5px dashed hsl(317, 20%, 60%);
  border-radius: 20px;
  position: relative;
  transition: 0.2s ease all;
// Align all children to the center of the container
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.file-upload:hover {
  background-color: hsl(317, 20%, 90%);
}
.file-upload:focus,
.file-upload:focus-within {
  outline: 5px solid hsl(317, 20%, 60%);
  outline-offset: 5px;
}
.file-upload__text {
  font-size: 2em;
  font-family: sans-serif;
}
.file-upload__input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
// Temporary Styles 
  background-color: lightblue;
}

Da unser labelan unser gebunden ist input, verhält es sich genauso, als würde es auf unseren inputWillen klicken. Jetzt müssen wir es nur noch inputoptisch ausblenden und schon kann es losgehen!

Indem wir die Stile aktualisieren, um .file-upload__inputunser zu entfernen background-colorund unser hinzuzufügen opacity, können wir die Dateieingabe visuell ausblenden und sie gleichzeitig auf der Seite belassen, um die Zugänglichkeit und das Standardverhalten des Browsers (wie Klicken und Ziehen) beizubehalten.

.file-upload__input {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
// New Styles
  opacity: 0;
}

      
                

                    
                    
                
            

Eines der Standardverhalten einer Dateieingabe ist die Anzeige des von Ihnen ausgewählten Dateinamens. Leider können wir diese Informationen ohne etwas Javascript nicht anzeigen. Beachten wir die Funktionalität, die wir unten hinzufügen möchten:

1. Benutzer informieren, wenn keine Datei ausgewählt ist
2. Benutzerdateinamen anzeigen, wenn eine Datei ausgewählt ist

<input type="file" class="file-upload__input" id="FileUploadInput">

<span class="file-upload__file-name" id="FileUploadFileName">No file selected</span>

<label class="file-upload">
  <span class="file-upload__text">
    Click or Drag file here...
  </span>
  <span role="presentation" class="file-upload__file-name" id="FileUploadFileName">
    No file selected
  </span>
  <input type="file" class="file-upload__input" id="FileUploadInput">
</label>

var fileInput = document.querySelector("#FileUploadInput");
var fileName = document.querySelector("#FileUploadFileName");

fileInput.addEventListener("change", function () {
  fileName.innerText = fileInput.value.split("\\").pop();
});

var fileInput = document.querySelector("#FileUploadInput");
var fileName = document.querySelector("#FileUploadFileName");
fileInput.addEventListener("change", function () {
  fileName.innerText = fileInput.value.split("\\").pop();
});

Durch das Hinzufügen einiger Zeilen Javascript können wir Benutzern visuelles Feedback darüber geben, welche Datei hochgeladen wird. Was noch besser ist: Wir konnten all dies tun, ohne die zugrunde liegende Funktionalität und Zugänglichkeit unseres Codes zu beeinträchtigen!

Durch die Nutzung der uns zur Verfügung stehenden HTML-Elemente, den Einsatz von CSS, um sie so zu gestalten, dass wir unseren Benutzern ein besseres visuelles Erlebnis bieten können, und die ausschließliche Verwendung von Javascript zum Füllen der Lücken ist es uns gelungen, einen Datei-Upload zu erstellen Das sollte nur minimalen Wartungsaufwand erfordern und basiert auf der nativen Funktionalität des Browsers.

Das ist ziemlich toll!