Show the filename in the file upload field on Bootstrap 4

Question

Show the filename in the file upload field on Bootstrap 4

Utilizing Bootstrap 4 for my webpage, I have encountered an issue with the file upload option. When users select a file, the name of the file is not being displayed as it normally would in regular HTML. Can you please review my code and the accompanying screenshots to provide guidance on what needs to be adjusted?

<form method="post" action="upload_sub_fasta.php" enctype="multipart/form-data">
    <div class="input-group mb-3">
        <div class="custom-file">
            <input type="file" name="file" class="custom-file-input" id="validatedCustomFile" required>
            <label class="custom-file-label" for="validatedCustomFile">Choose query</label>
        </div>
        <button type="submit" name="submit" class="btn btn-primary">Upload</button>
    </div>
</form>

Below are the before and after screenshots of file selection:

Before file is selected

https://i.sstatic.net/jOgpy.png

After file is selected

https://i.sstatic.net/bPMNm.png

Thank you, Karthic

html css bootstrap-4

Answer 1

Answer №1

Make sure to include the following script in your code:

'use strict';

;( function ( doc, win, ind )
{
var elems = doc.querySelectorAll( '.custom-file-input' );
Array.prototype.forEach.call( elems, function( elem )
{
var label = elem.nextElementSibling,
labelVal = label.textContent;

elem.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();

if( fileName )
label.textContent = fileName;
else
label.textContent = labelVal;
});

// Fix for Firefox bug
elem.addEventListener( 'focus', function(){ elem.classList.add( 'has-focus' ); });
elem.addEventListener( 'blur', function(){ elem.classList.remove( 'has-focus' ); });
});
}( doc, win, 0 ));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form method="post" action="upload_sub_fasta.php" enctype="multipart/form-data">
            <div class="input-group mb-3">
                    <div class="custom-file">
                            <input type="file" name="file" class="custom-file-input" id="validatedCustomFile" required>
                            <label class="custom-file-label" for="validatedCustomFile">Choose query</label>
                    </div>
                            <button type="submit" name="submit" class="btn btn-primary">Upload</button>
            </div>            

    </form>

Answer 2

Make sure to include the following script in your code:

'use strict';

;( function ( doc, win, ind )
{
var elems = doc.querySelectorAll( '.custom-file-input' );
Array.prototype.forEach.call( elems, function( elem )
{
var label = elem.nextElementSibling,
labelVal = label.textContent;

elem.addEventListener( 'change', function( e )
{
var fileName = '';
if( this.files && this.files.length > 1 )
fileName = ( this.getAttribute( 'data-multiple-caption' ) || '' ).replace( '{count}', this.files.length );
else
fileName = e.target.value.split( '\\' ).pop();

if( fileName )
label.textContent = fileName;
else
label.textContent = labelVal;
});

// Fix for Firefox bug
elem.addEventListener( 'focus', function(){ elem.classList.add( 'has-focus' ); });
elem.addEventListener( 'blur', function(){ elem.classList.remove( 'has-focus' ); });
});
}( doc, win, 0 ));

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<form method="post" action="upload_sub_fasta.php" enctype="multipart/form-data">
            <div class="input-group mb-3">
                    <div class="custom-file">
                            <input type="file" name="file" class="custom-file-input" id="validatedCustomFile" required>
                            <label class="custom-file-label" for="validatedCustomFile">Choose query</label>
                    </div>
                            <button type="submit" name="submit" class="btn btn-primary">Upload</button>
            </div>            

    </form>

Answer 3

Answer №2

Check out this code snippet that utilizes Bootstrap 4. You may have missed adding the necessary Javascript code. Give it a try, I believe it will assist you. Thank you.

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile" name="filename">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Answer 4

Check out this code snippet that utilizes Bootstrap 4. You may have missed adding the necessary Javascript code. Give it a try, I believe it will assist you. Thank you.

$(".custom-file-input").on("change", function() {
  var fileName = $(this).val().split("\\").pop();
  $(this).siblings(".custom-file-label").addClass("selected").html(fileName);
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

<div class="custom-file">
  <input type="file" class="custom-file-input" id="customFile" name="filename">
  <label class="custom-file-label" for="customFile">Choose file</label>
</div>

Answer 5

Answer №3

Feel free to experiment with this code and integrate it into your own CSS style:

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01"
      aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01"></label>
  </div>
</div>

Answer 6

Feel free to experiment with this code and integrate it into your own CSS style:

<div class="input-group">
  <div class="input-group-prepend">
    <span class="input-group-text" id="inputGroupFileAddon01">Upload</span>
  </div>
  <div class="custom-file">
    <input type="file" class="custom-file-input" id="inputGroupFile01"
      aria-describedby="inputGroupFileAddon01">
    <label class="custom-file-label" for="inputGroupFile01"></label>
  </div>
</div>

Show the filename in the file upload field on Bootstrap 4

Answer №1

Answer №2

Answer №3

Similar questions

Connecting HTML pages on two different drives on the same computer: Is it possible?

Instructions on displaying the filename as the input for width and height dimensions

Creating a mandatory 'Select' component in Material UI with React JS

What is the best way to configure an EmailId validator in Angular 6 to be case insensitive?

Calculate the number of parent nodes and their respective child nodes

Issue with deactivating attribute through class name element retrieval

Utilizing jQuery to access data stored locally

When the only source is available, the image undergoes a transformation

When an HTML table utilizes both rowspan and colspan attributes, it may encounter issues with being overlapped by the

I would like to showcase the image with specific dimensions in CakePHP

AngularJS function orderBy reverses the array instead of sorting it

"Encountering a problem with a function showing an undefined error

Creating a bordered triangle using only CSS

Could Angular be automatically applying margins or padding to my component?

Creating a New Row in an HTML Table

Stylesheet compilation with SCSS scripts

JavaScript script that parses innerHTML

"Dilemma with Displaying a 3-Digit Number in DaisyUI Using Next.Js Countdown Component

Enhance your iPad's design with a stylish div box-shadow

Variability of pixel dimensions on various devices