التغلب على قيود إدخال الملفات في Bootstrap 4

يوفر Bootstrap 4 مكون إدخال ملف مخصص لتبسيط اختيار الملف للمستخدمين. ومع ذلك، إذا كنت تتطلع إلى تخصيص نص العنصر النائب "اختيار ملف..." أو عرض اسم الملف المختار، فقد تواجه بعض التحديات.

تغيير العناصر النائبة في Bootstrap 4.1 والإصدارات الأحدث

منذ الإصدار 4.1 من Bootstrap، أصبح نص العنصر النائب موجودًا في عنصر تسمية الملف المخصص. يمكنك تجاوزه باستخدام CSS:

.custom-file-label::after {
  content: "Select file...";
}

تعديل نص زر الملف

.custom-file-input ~ .custom-file-label::after {
    content: "Button Text";
}

عرض اسم الملف المحدد في Bootstrap 4.4

document.querySelector('.custom-file-input').addEventListener('change', function(e) {
  var fileName = document.getElementById("myInput").files[0].name;
  var nextSibling = e.target.nextElementSibling
  nextSibling.innerText = fileName
})

خيارات ما قبل Bootstrap 4.1:

.custom-file-control.selected:lang(en)::after {
  content: "" !important;
}

$('.custom-file-input').on('change',function(){ فار fileName = $(this).val(); $(this).next('.form-control-file').addClass("selected").html(fileName); })

توفر هذه الأساليب المرونة في تخصيص مكون إدخال الملفات في Bootstrap 4، مما يتيح لك تخصيصه وفقًا لمتطلباتك المحددة.