Cum se poate stiliza un element input pentru încărcarea fișierelor?

Stilizarea elementului <input type="file"> standard este dificilă din cauza limitărilor browser-ului. Cea mai bună abordare este să ascundeți elementul standard și să utilizați un alt element (de exemplu, <label> sau un buton) pentru a declanșa dialogul de selectare a fișierului.

1. Ascundeți <input type="file"> standard:

.file-input {
  display: none; /* Sau visibility: hidden; height: 0; width: 0; pentru accesibilitate */
}

2. Creați un element stilizat (de exemplu, <label>) și legați-l de <input> prin atributul for:

<label for="upload-button" class="custom-upload-button">
  Alege fișierul
</label>
<input type="file" id="upload-button" class="file-input">

3. Stilizați elementul creat:

.custom-upload-button {
  display: inline-block; /* Sau block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Exemplu */
  /* Stiluri suplimentare după nevoie */
}

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

4. (Opțional) Afișați numele fișierului selectat:

Ascultătorul evenimentului change pe <input type="file"> permite obținerea informațiilor despre fișierul selectat și afișarea numelui său.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Element de afișare

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Niciun fișier selectat';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Niciun fișier selectat</span>

Această metodă oferă control total asupra aspectului elementului de încărcare a fișierelor, păstrând comportamentul standard al browser-ului.