The filename is not displaying in the file input field within the bootstrap framework

Below is the HTML code I am working with:

<head>
  <link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>

<body>
  <div class="input-group">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
      <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
    </div>
  </div>
  <script src="./Depd/jquery.slim.min.js">
  </script>
  <script src="./Depd/popper.min.js"></script>
  <script src="./Depd/bootstrap.min.js"></script>
</body>
When attempting to upload a file by selecting browse and picking a file, I want the label text to change to the name of the uploaded file. How can I achieve this? I specifically need a solution that works with Bootstrap, as using normal HTML displays the file name by default but Bootstrap does not. Please provide suggestions accordingly.

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

To achieve this task, JavaScript will be necessary. Let me guide you through the process: First, detect when a file is uploaded, then extract the file name and update the label content with the filename. See below for a concise example.

let input = document.getElementById("inputGroupFile04");
let label = document.querySelector("label[for='inputGroupFile04']");
input.addEventListener("change", e => {
  label.innerText = input.value.split(`C:\\fakepath\\`)[1];
});
<head>
  <link rel="stylesheet" href="./Depd/bootstrap.min.css">
</head>

<body>
  <div class="input-group">
    <div class="custom-file">
      <input type="file" class="custom-file-input" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04">
      <label class="custom-file-label" for="inputGroupFile04">Choose file</label>
    </div>
    <div class="input-group-append">
      <button class="btn btn-outline-secondary" type="button" id="inputGroupFileAddon04">Button</button>
    </div>
  </div>
  <script src="./Depd/jquery.slim.min.js">
  </script>
  <script src="./Depd/popper.min.js"></script>
  <script src="./Depd/bootstrap.min.js"></script>
</body>

If further clarification is needed, feel free to ask without hesitation.

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

The Bootstrap 4 navigation bar is failing to extend fully across the width when a dropdown menu

Here is the code I am using for the navigation bar. When I click on the dropdown button, this is how it appears on my webpage: Click here <nav class="navbar navbar-expand-lg navbar-dark bg-color mb-3"> <a class="navbar-brand" ...

htmlcssbootstrap-4

Height specification in Tailwind Grid

Hi there! I'm currently working on implementing a grid system in NextJS using Tailwind CSS. However, I've hit a roadblock when it comes to automatically sizing the grids to fit the parent element. Let me illustrate my issue with two images below ...

csslayoutnext.jstailwind-csscss-grid

I receive an [object HTMLCollection] as the output

I am currently working on recreating a login page and I want it so that when the button is clicked, it displays the name you entered, but instead, it returns [object HTMLCollection]. My expectation was to have the name displayed as entered. var nombre ...

javascripthtmlcssbutton

Align the content of a collapsed bootstrap row vertically

In a row, I have two columns, each containing their own row. When the page width hits the 'xs' break-point, the left column's row will stack its columns on top of each other. The right column is taller than the left column, which leaves a l ...

twitter-bootstrapcssflexboxbootstrap-4

Simple: What is causing the error message "TypeError: 'int' object is not callable" to appear? (refer to line 24 in the code)

I'm struggling with a coding issue and can't seem to find a solution. Would appreciate it if someone could provide some guidance on what's going wrong. Essentially, this script is designed to fetch the HTML content of a URL, extract specific ...

pythonhtmlregexselenium

Issues with Gulp Autoprefixer Functionality

I'm struggling to make Autoprefixer work with Gulp. Despite using opacity, gradients, and transforms in my CSS, I can't see any vendor prefixes being added. However, everything else seems to be functioning correctly. Below is my gulp file: var ...

csssassgulpautoprefixer

In order to implement the functionality in JavaScript, the .slider::-webkit-slider

I need to create a slider that adjusts the size of the dot based on the value input. For example, when the value is 1, the dot size should be 10px and for a value of 100, it should be 100px. Is there a way to dynamically change the height of .slider::-web ...

javascripthtmlcsswebkit

Is there a way to perfectly align a left-aligned drawable with a hint in a TextInputEditText and position them closer to the bottom of the text input field?

Struggling to align the drawableLeft horizontally with the hint and bring them closer to the bottom of the TextInputEditText. I have experimented with various attributes but haven't been successful so far. Wondering if I might be overlooking something ...

androidcssxmlandroid-layoutmaterial-ui

Steps for selecting checkboxes according to database values in AngularJSWould you like to learn how to automatically check checkboxes based on the

I am experiencing an issue where I can successfully insert values into the database based on what is checked, but I am encountering difficulty retrieving the values when fetching from the database. Can anyone provide me with some assistance? Thank you. Th ...

javascripthtmlangularjscheckbox

What is the best way to ensure that a <div> extends all the way to the bottom?

My goal is to have this element reach the bottom of the screen, but I also have a header which complicates things. Setting height: 100%; or 100vh results in the page being too big and scrollable. I don't want to manually calculate it because of respon ...

htmlcss

The media query fails to start in the browser's mobile display

Instead of just adjusting the browser window size, I utilized Chrome's developer tools to make adjustments. I double-checked that the appropriate meta tags were included in the code: <meta name="viewport" content="width=device-width, initial-scal ...

cssmobilemedia-queries

Is it possible to use ng-if in Angular without affecting the stylesheet

Is there a way to implement an ng-if directive without the need for a container element? I am experimenting with dynamic menu items controlled by the current view controller and trying to differentiate between dropdown and non-dropdown types. However, usin ...

angularjstwitter-bootstrapangularjs-ng-repeat

What is the best way to ensure that the sidebar appears after the content on mobile devices, even when there are full-width blocks within

I attempted to enclose fixed-width content and sidebar within a common container, but when it came to mobile devices, I could only come up with a solution where the sidebar is positioned after the content and before the full-width content. However, this ar ...

htmlcssresponsive-design

Button press triggers the fadeIn function successfully, but the keypress event does not have the same effect

I'm currently facing an issue with two div elements on my webpage. I want only one of them to be visible at a time, depending on which key is pressed. If the 1 key is pressed, I want 'div1' to fadeIn (if it's not already visible) and fo ...

javascriptjqueryhtmlcss

Toggle Submenu Visibility with a Click

One section of my code is located in sidebar.component.html : <ul class="nav"> <li routerLinkActive="active" *ngFor="let menuItem of menuItems" class="{{menuItem.class}} nav-item"> &l ...

htmlcssangulartypescript

Identify the index of a list item using a custom list created from buttons

When dealing with a dynamically built list like this: <ul id="shortcuts"> <li><input type="checkbox" value="false"/><button>foo</button><button>-</button></li> <li><input type="checkbox" value ...

javascriptjqueryhtml

What is the best way to exclude the "table" property from a button inside a row of a table?

I'm currently working with bootstrap and have implemented a table with the property "table" to create a light background for the data pulled from a database. The design looks great, except for when I try to insert a button in each row for editing purp ...

htmlcssbuttonbootstrap-4html-table

Is there a way to showcase whitespacing in HTML?

I have a database full of content that includes whitespace formatting for display on a webpage. However, when viewed on Stackoverflow using the code tag, the formatting changes. The second way shows how it is stored in the database and how I want it to app ...

htmlasp.net-mvcformattingwhitespace

Inspecting JavaScript for any attachments

Before hitting the submit button, I need to verify if a file has been uploaded and display a warning message prompting the user to attach a file if it hasn't been done yet. I am looking for guidance on how to achieve this using JavaScript, Prototype, ...

javascriptjqueryhtml

Is there a way to randomly change the colors of divs for a variable amount of time?

I have a unique idea for creating a dynamic four-square box that changes colors at random every time a button is clicked. The twist is, I want the colors to cycle randomly for up to 5 seconds before 3 out of 4 squares turn black and one square stops on a r ...

javascripthtmlcss