Faylların yüklənməsi üçün input elementini necə stilizə etmək olar?

Standart <input type="file"> elementinin stilizasiyası brauzer məhdudiyyətləri səbəbindən çətindir. Ən yaxşı yanaşma — standart elementi gizlətmək və fayl seçimi dialoqunu çağırmaq üçün başqa elementdən (məsələn, <label> və ya düymə) istifadə etməkdir.

1. Standart <input type="file"> elementini gizlət:

.file-input {
  display: none; /* Və ya accessibility üçün visibility: hidden; height: 0; width: 0; */
}

2. Stilizə edilmiş element (məsələn, <label>) yaradın və onu <input> ilə for atributu vasitəsilə əlaqələndirin:

<label for="upload-button" class="custom-upload-button">
  Fayl seç
</label>
<input type="file" id="upload-button" class="file-input">

3. Yaradılmış elementi stilizə edin:

.custom-upload-button {
  display: inline-block; /* və ya block */
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border-radius: 5px;
  cursor: pointer;
  font-family: sans-serif; /* Nümunə */
  /* Əlavə stillər lazım olarsa */
}

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

4. (İstəyə bağlı) Seçilmiş faylın adını göstərin:

change hadisə dinləyicisi <input type="file"> üzərində fayl haqqında məlumat almağa və onun adını göstərməyə imkan verir.

const fileInput = document.getElementById('upload-button');
const fileNameDisplay = document.getElementById('file-name'); // Göstərmə elementi

fileInput.addEventListener('change', (event) => {
  const fileName = event.target.files[0]?.name || 'Fayl seçilməyib';
  fileNameDisplay.textContent = fileName;
});

<span id="file-name">Fayl seçilməyib</span>

Bu metod fayl yükləmə elementinin görünüşü üzərində tam nəzarət təmin edir və brauzerin standart davranışını qoruyur.