बूटस्ट्रैप 4 के फ़ाइल इनपुट की सीमाओं को पार करना

बूटस्ट्रैप 4 उपयोगकर्ताओं के लिए फ़ाइल चयन को सरल बनाने के लिए एक कस्टम फ़ाइल इनपुट घटक प्रदान करता है। हालाँकि, यदि आप "फ़ाइल चुनें..." प्लेसहोल्डर टेक्स्ट को अनुकूलित करना चाहते हैं या चुनी गई फ़ाइल का नाम प्रदर्शित करना चाहते हैं, तो आपको कुछ चुनौतियों का सामना करना पड़ सकता है।

बूटस्ट्रैप 4.1 और इसके बाद के संस्करण में प्लेसहोल्डर्स को बदलना

बूटस्ट्रैप 4.1 के बाद से, प्लेसहोल्डर टेक्स्ट कस्टम-फ़ाइल-लेबल तत्व में रहता है। आप इसे CSS से ओवरराइड कर सकते हैं:

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

फ़ाइल बटन टेक्स्ट में बदलाव

बूटस्ट्रैप 4.1 फ़ाइल बटन टेक्स्ट को बदलने के लिए एक सीधी विधि प्रदान नहीं करता है। इसे प्राप्त करने के लिए, कुछ कस्टम स्टाइल जोड़ने पर विचार करें:

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

बूटस्ट्रैप 4.4 में चयनित फ़ाइल नाम प्रदर्शित करना

बूटस्ट्रैप 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
})

प्री-बूटस्ट्रैप 4.1 विकल्प:

प्रारंभिक प्लेसहोल्डर को छिपाना:

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

चयनित फ़ाइल नाम प्रदर्शित करना:

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

ये दृष्टिकोण बूटस्ट्रैप 4 के फ़ाइल इनपुट घटक को अनुकूलित करने में लचीलापन प्रदान करते हैं, जिससे आप इसे अपनी विशिष्ट आवश्यकताओं के अनुरूप बना सकते हैं।