Kako stilizovati element input za učitavanje fajlova?

Stilizacija standardnog <input type="file"> elementa je teška zbog ograničenja pretraživača. Najbolji pristup je da sakrijete standardni element i koristite drugi element (npr. <label> ili dugme) za pokretanje dijaloga za izbor fajla.

1. Sakrijte standardni <input type="file">:

.file-input {
  display: none; /* Ili visibility: hidden; height: 0; width: 0; za pristupačnost */
}

2. Kreirajte stilizovani element (npr. <label>) i povežite ga sa <input> putem atributa for:

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

3. Stilizujte kreirani element:

.custom-upload-button {
  display: inline-block; /* Ili block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Primer */
  /* Dodatni stilovi po potrebi */
}

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

4. (Opcionalno) Prikažite ime odabranog fajla:

Slušač događaja change na <input type="file"> omogućava da dobijete informacije o odabranom fajlu i da prikažete njegovo ime.

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

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

<span id="file-name">Fajl nije odabran</span>

Ovaj metod pruža potpunu kontrolu nad izgledom elementa za učitavanje fajlova, a istovremeno zadržava standardno ponašanje pretraživača.