Bootstrap form: Custom file button working but not showing name of uploaded file

Question

I have created a Bootstrap form consisting of two columns (using Bootstrap 4.3). Inside this form I use a custom file upload button.

The button allows me to select files and also uploads them as intended.
My only problem is that it does not show the name of the uploaded file after uploading it (it should replace "No file chosen", e.g. showing "test.xlsx" instead).

Can someone tell me how to get this to work ? Do I need to add any jQuery etc. for that ?

My HTML:

<div class="form-group row">
    <label for="attachment" class="col-md-3 col-lg-2 col-form-label">
        <span id="lblAttachment">Attachment</span>:
    </label>
    <div class="col-md-9 col-lg-10 input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="lblFile">File</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="attachment" name="attachment" aria-describedby="lblFile"/>
            <label for="attachment" class="custom-file-label">No file chosen</label>
        </div>
    </div>
</div>

Many thanks in advance.

Front End Coder · Accepted Answer · 2019-09-23 13:42:11Z

2

I Testing your code, its working

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Vertical (basic) form</h2>
  <form action="/action_page.php">
    <div class="form-group row">
    <label for="attachment" class="col-md-3 col-lg-2 col-form-label">
        <span id="lblAttachment">Attachment</span>:
    </label>
    <div class="col-md-9 col-lg-10 input-group">
        <div class="input-group-prepend">
            <span class="input-group-text" id="lblFile">File</span>
        </div>
        <div class="custom-file">
            <input type="file" class="custom-file-input" id="attachment" name="attachment" aria-describedby="lblFile"/>
            <label for="attachment" class="custom-file-label">No file chosen</label>
        </div>
    </div>
</div>  
  </form>
</div>

</body>
</html>

For More Info Check this link : https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h

edited Sep 23, 2019 at 13:42

answered Sep 23, 2019 at 13:25

Front End Coder

4682 silver badges8 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user7832194 Over a year ago

Thanks for this. I am using Bootstrap 4.3.1 and slightly different references in the head: <link rel="stylesheet" href="includes/bootstrap-4.3.1/css/bootstrap.min.css"/> <script src="code.jquery.com/jquery-3.2.1.slim.min.js"></script> -- Could that be the issue ? Should I update to newer jQuery ?

Front End Coder Over a year ago

I have updated my answer, added the link check that and if you found my answer solve your issue or its useful upvote it or mark it as accepted.

JPeter · Accepted Answer · 2019-09-23 13:31:57Z

1

If I'm not mistaken, if you want to custom that "No file" message you need to change it after the file upload using JS, Angular, etc. because that said text dosen't know when to change.

something like this will do the trick:

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

Here some links to help you out:

https://www.w3schools.com/bootstrap4/bootstrap_forms_custom.asp https://www.w3schools.com/bootstrap4/tryit.asp?filename=trybs_form_custom_file&stacked=h

answered Sep 23, 2019 at 13:31

JPeter

2191 silver badge16 bronze badges

3 Comments

user7832194 Over a year ago

Thanks a lot. That makes sense. I added your code to the doc ready function for this page but it still doesn't show me the uploaded file. The file is definitely there (somewhere hidden) as I can see it when I process the form. So it seems something is blocking the text update. Any other thoughts ?

JPeter Over a year ago

add this peace to your css .custom-file-label.selected::after { content: "" !important; }

user7832194 Over a year ago

Update: This function actually did the trick. I just had to move my library references from the footer to the head to make it work. Thanks a again !

Collectives™ on Stack Overflow

Bootstrap form: Custom file button working but not showing name of uploaded file

2 Answers 2

2 Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related