Locating a File in the Bootstrap 4 File Explorer

Bootstrap 4's file browser lacks the file name display, showing only "Choose file...". To address this issue, I created a JavaScript solution. Are there any alternative methods to solve this problem?

HTML

<label class="file">
    <input type="file" id="file1" >
    <span class="file-custom" data-content="Choose file..."></span>
</label>

jQuery

$("input[type=file]").change(function(){
    var fieldVal = $(this).val();
    if (fieldVal != undefined || fieldVal != "") {   
        $(this).next(".file-custom").attr('data-content', fieldVal);
    }
});

CSS

.file-custom:after {
    content: attr(data-content);
}

The main tweak is adding the data-content attribute to the span element, which also simplifies language changes.

Explore Bootstrap's file browser here:

jqueryhtmlcsstwitter-bootstrap-4

Answer №1

It seems that Bootstrap's current direction is to forgo a JS solution and consider integrating a script like yours into the documentation as a recommended approach, based on insights shared by mdo in this discussion: https://github.com/twbs/bootstrap/issues/20813

I've adjusted your basic code for compatibility with Bootstrap 4 Alpha 6.

Using jQuery:

$("input[type=file]").change(function () {
  var fieldVal = $(this).val();
  if (fieldVal != undefined || fieldVal != "") {
    $(this).next(".custom-file-control").attr('data-content', fieldVal);
  }
});

CSS styling:

.custom-file-control:after {
    content: attr(data-content) !important;
}

Edit:

The previous method may display something like C:\\fakepath... in the styled input; to show only the file name itself, utilize event.target.files[0].name:

$("input[type=file]").change(function (event) {
  var fieldVal = event.target.files[0].name;
  if (fieldVal != undefined || fieldVal != "") {
    $(this).next(".custom-file-control").attr('data-content', fieldVal);
  }
});

Answer №2

Expanding on Joey's response, in order to implement file input changes for Bootstrap 4 public release, the recommended approach includes utilizing this JavaScript code without any additional CSS:

$("input[type=file]").change(function () {
    var fieldVal = $(this).val();
    if (fieldVal !== undefined || fieldVal !== "") {
        $(this).next(".custom-file-label").text(fieldVal);
    }
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing JQuery to request a file input and subsequently handle its processing

I am working towards creating a functionality where users can click a button, select a file, and have the program perform actions on that file, such as sending it through an AJAX request for processing. Currently, I have set up a hidden form along with a b ...

javascriptjquery

Instructions on how to automatically close a Bootstrap 5 alert without using jQuery

With the removal of jQuery as a dependency in Bootstrap 5, I have been exploring ways to automatically dismiss an Alert after a set duration using raw Javascript. Below is a snippet of my current approach. I believe there is room for optimization or a bett ...

javascripthtmlbootstrap-5

Utilize Jquery to open and view numerous files simultaneously

I have been working with the HTML 5 multiple files feature, allowing users to select and upload multiple files at once. These files are stored as an array of files in the $_FILES variable. My goal is to utilize jQuery to retrieve and display all the file n ...

jqueryjquery-ui

Modify the border color of a div contained within another div

I recently incorporated a Vue component (available at ): <vue-editor id="description" name="description" :class="{'uk-form-danger': errors.has('description') }" v-model="description" :editorToolbar="customToolbar" v-validate="' ...

cssvue.js

Obtaining the API for a website's functionalities

I’m in need of downloading the API file that facilitates the connection between the website and database. How can I achieve this? I've attempted to use Httrack, wget, and open explorer, but they only seem to download the website itself. While I get ...

phphtmlweb-scraping

Despite using "border-box" for the box-sizing property, the table cells are

Padding needs to be added to the cells of a table, but this is causing overflow issues with text and inputs inside the table. Despite attempting to set box-sizing: border-box, the problem persists. An example below demonstrates the issue: * { box-siz ...

htmlcsshtml-tableborder-boxbox-sizing

Enhance Your HTML Skills: Amplifying Table Display with Images

Recently, I utilized HTML to design a table. The Table Facts : In the first row, I included an appealing image. The second row contains several pieces of content. In continuation, I added a third row. The contents in this row are extensive, resulting i ...

javascriptjqueryhtml

Is there a way to retrieve data from two tables by linking the foreign key in one table to the primary key in another table?

I'm currently working on a menu item and have run into an issue with the information being displayed for the second level submenu (letters). Despite trying various join methods, I am unable to get the correct data - it either pulls only one of my subm ...

phpmysqlhtml

After an ajax request, the Jquery hover effects are no longer functional

On my website, I have implemented ajax calls to filter product results and apply effects. However, the effects on these products seem to stop working after the ajax call is completed. Located at the bottom of the page's code is the following script: ...

javascriptjqueryajax

What causes the scrollbar to not extend to the bottom when connected to another scrollbar via a JavaScript equation?

I have been working on a code that involves multiple scrollbars that are all linked together. When you move one scrollbar, the other two will move proportionally. However, due to differences in width, the scroller doesn't always reach the end of the s ...

javascripthtmlcss

Continuously simulate mousewheel events

I'm trying to make my mousewheel event trigger every time I scroll up, but it's only firing once. Can you assist me with this issue? Please review the code snippet below. $('#foo').bind('mousewheel', function(e){ if(e.o ...

javascriptjqueryjquery-eventsmousewheel

Creating a Dynamic Layout with Varying Items in an Array Using PHP

Suppose I provide you with an array of objects, where x represents the number of objects. How would you achieve the following using a grid system (bootstrap, foundation, etc.)? Loop over the array and generate something similar to: https://i.sstatic.net/ ...

phphtmlarrayszurb-foundation

The issue of Bootstrap icons not displaying on the front-end arises when integrating them into a Vuejs Template

I'm in the process of constructing a web application using Vue.JS. I've integrated the [Bootstrap Icons][1] into my application, but for some reason, the icons are not showing up on the screen. Here are the steps I followed: Installed Bootstrap ...

htmlcsstwitter-bootstrapbootstrap-4vuejs2

jQuery's selection of elements in the Sumo Select plugin is malfunctioning

Having trouble selecting a value in a sumoselect dropdown using jQuery: $('select.multiple-select2')[0].sumo.selectItem(2); It's not working as expected. Sumoselect library can be found here Any assistance would be appreciated. ...

javascriptjqueryselectsumoselect.js

Enhance a link using jQuery to allow it to expand and collapse

I am currently working on an MVC view that features a 3-column table showcasing a list of products. The first column, which contains the product names, is clickable and directs users to a specific product page. I am looking to implement functionality where ...

javascriptjqueryhtmlcss

Is there a way to collapse an element by clicking either the content inside the div or the button within the div?

Is there a way to make a button within a newly activated div close it? The existing code seems to have issues with this functionality, and adding new rules or functions has not solved the problem. Any assistance with fixing this issue using vanilla JavaScr ...

javascripthtmlcss

Instructions for creating a table in this specific format

I have some data stored in MySQL and I am looking to display it in a specific format: Data: Name, Image URL, Link I would like to dynamically print it like this: Even though I don't know the user's screen width, I want it to be displayed as w ...

phphtmlmysql

Customizing Scrollbar Functionality

Recently, I have been working on customizing scrollbar behavior. However, I have encountered an issue where the scrollbar remains visible even when I am not actively scrolling. This was not the case before applying the below CSS code. My expectation is th ...

cssreactjsmaterial-uiscrollbar

Data is not being stored in Parse

I am currently facing a challenge while working with Parse for Javascript: When users sign up, along with their username and password, I also need to save their first and last names in Parse. However, at the moment, only the username and password are bein ...

javascriptjsonhtmlparse-platform

What is the best way to remove a CSS style using JavaScript?

For my website automation using Selenium, I encountered a challenging dropdown that was not the standard native one but a custom-designed version. To tackle this issue, I needed to set its CSS class to hidden in order to access the native functionality smo ...

javascriptjquerycssseleniumselenium-webdriver