How to put "No file chosen" text under a button

Question

I need it to be under not next to the button. Is there any easy way to do that?

<input type="file" size="45">

Welcome to Stack Overflow. The goal of this website isn't to write code for you, but to help you solve issues with your current code. Can you please provide us some code with some attempts you've made? — Ismael Miguel, Jul 30 '15 at 09:22
That isn't even an attempt... Did you tried some CSS or other HTML or even a few lines of Javascript? — Ismael Miguel, Jul 30 '15 at 09:31

score 1 · Answer 1 · edited May 23 '17 at 12:16

1

How about a solution like this

<input type="file" id="selectedFile" style="display: none;" onchange="document.getElementsByTagName('p')[0].innerHTML=this.value;"/>
<input type="button" value="Browse..." onclick="document.getElementById('selectedFile').click();" />
<p>no file chosen</p>

An example: https://jsfiddle.net/366tjfvn/1/

ref: How to hide text field in Html File Upload

Updated thanks to: Ismael Miguel

edited May 23 '17 at 12:16

Community

1
1

answered Jul 30 '15 at 09:29

Vangel Tzo

8,885
3
26
32

The only thing now would be an `onchange` event in the file input to update the `
`
– Ismael Miguel Jul 30 '15 at 09:31
Try this: `` – Ismael Miguel Jul 30 '15 at 09:34

Prasad Shigwan · Answer 2 · 2015-08-03T06:15:19.650

Add the following code snippet:

Html:

@using (Html.BeginForm("FileUpload", "Admin", FormMethod.Post, new { enctype = "multipart/form-data" }))
            {
                @Html.AntiForgeryToken()
                <label style="width: 33px; display: inline-block;">Path : </label>
                <input type="text" id="UploadTextBox" readonly="readonly" style="display: inline-block; margin-left: 5px; width: 300px; height: 18px; background-color: white;" />
                <input type="file" id="BtnBrowseHidden" name="files" style="display: inline-block; margin-left: 15px;" />
                <label for="BtnBrowseHidden" id="LblBrowse" style="display: inline-block; margin-left: 15px;">
                    Browse
                </label>
                <input type="submit" id="BtnUpload" value="Upload" style="display: inline-block; margin-left: 15px;" />
            }
        <div>
            <label id="ErrorMessage" style="display: none; text-align: center; width: 200px; margin-left: 345px;"></label>
        </div>

Jquery code:

<script type="text/javascript">
    $(document).ready(function () {
        $('#BtnBrowseHidden').hide();
        $("#BtnBrowseHidden").change(function () {
            var Value = $(this).val();
            $('#UploadTextBox').val(Value);

            if (Value != "") {
                var extesion = /[^.]+$/.exec(Value);
                if (extesion[0] != "xlsx" && extesion[0] != "xls") {
                    //Please upload Excel file.
                    $("#ErrorMessage").html("Please upload Excel file.");
                    $("#ErrorMessage").css('color', 'red');
                    $("#ErrorMessage").show();
                    document.getElementById("BtnUpload").disabled = true;
                }
                else {
                    $("#ErrorMessage").html("");
                    $("#ErrorMessage").hide();
                    document.getElementById("BtnUpload").disabled = false;
                }
            }
            else {
                    $("#ErrorMessage").html("No File choosen.");
                    $("#ErrorMessage").css('color', 'red');
                    $("#ErrorMessage").show();
                 }
            return false;
        });
});
</script>

It can be more useful if it comes with some explanation with the code. — ROBBAT1, Aug 27 '20 at 18:14

How to put "No file chosen" text under a button

2 Answers2