Hoe kan je een input-element stylen voor het uploaden van bestanden?

Het stylen van de standaard <input type="file"> is moeilijk vanwege browserbeperkingen. De beste aanpak is om het standaardelement te verbergen en een ander element (bijvoorbeeld <label> of een knop) te gebruiken om het bestandsselectievenster te openen.

1. Verberg het standaard <input type="file">:

.file-input {
  display: none; /* Of visibility: hidden; height: 0; width: 0; voor toegankelijkheid */
}

2. Maak een gestileerd element (bijvoorbeeld <label>) en koppel het via de for-attribuut aan <input>:

<label for="upload-button" class="custom-upload-button">
  Bestand kiezen
</label>
<input type="file" id="upload-button" class="file-input">

3. Styleer het gemaakte element:

.custom-upload-button {
  display: inline-block; /* Of block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Voorbeeld */
  /* Extra stijlen indien nodig */
}

.custom-upload-button:hover {
  background-color: #0056b3;
}

4. (Optioneel) Toon de naam van het geselecteerde bestand:

De change-gebeurtenislistener op <input type="file"> maakt het mogelijk om informatie over het geselecteerde bestand te krijgen en de naam weer te geven.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Element voor weergave

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Geen bestand geselecteerd';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Geen bestand geselecteerd</span>

Deze methode biedt volledige controle over de uitstraling van het bestand upload element, terwijl het standaard gedrag van de browser behouden blijft.