CODEWITHSUNDEEP
htmlformstwitter-bootstrapfile-uploadbootstrap-4
user7832194
user7832194

Reputation:

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

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.

Upvotes: 3

Views: 1591

Answers (2)

Front End Coder
Front End Coder

Reputation: 468

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

Upvotes: 2

JPeter
JPeter

Reputation: 219

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

Upvotes: 1

Related Questions