Is there a way to remove the "chose a file" from an input file type?

Question

I want to remove the "No file Chosen" from an input file and then rename the "choose" to another text.

"" $(document).ready(function() {    
          var readURL = function(input) {
              if (input.files && input.files[0]) {
                  var reader = new FileReader();

                  reader.onload = function (e) {
                      $('.avatar').attr('src', e.target.result);
                  }

                        reader.readAsDataURL(input.files[0]);
                    }
                }


                $(".file-upload").on('change', function(){
                    readURL(this);
                });
                });""

Possible duplicate of [Change the "No file chosen":](https://stackoverflow.com/questions/16001586/change-the-no-file-chosen) — Prabhjot Singh Kainth, Nov 27 '19 at 13:02
hide the element with css and provide your own, passing events to & fro — flowtron, Nov 27 '19 at 13:02

Professor Abronsius · Answer 1 · 2019-11-27T14:18:39.880

One way to do this, as I have on a couple of occasions, would be to hide the input element and use a label element which is bound to the hidden file field to receive the click events. You can style the label however you see fit within reason so that ought to give sufficient flexibility to accomplish what you want?!

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            body, body *{ font-family:cursive }
            input[type='file']{
                width: 0px;
                height: 0px;
                opacity: 0;
                overflow: hidden;
                position: absolute;
                z-index: -1;
            }
            input[type='file'] + label{
                font-weight: 700;
                color: black;
                background-color: #E5E4E2;
                display: inline-block;
                border:1px solid black;
                padding:0.25rem;
                width:50%;
                cursor:pointer;
            }
            .input[type='file']:focus + label,
            .input[type='file'] + label:hover {
                background-color: red;
            }
            span{
                color:red
            }
        </style>

    </head>
    <body>
        <form>
                <input type='file' name='photo' id='photo' />
                <label for='photo'>
                    <span>Put your Text here</span>
                </label>
        </form>
        <script>
            /* you can still assign the listeners... */
            document.getElementById('photo').onchange=function(e){
                console.log(this.value)
            }
        </script>
    </body>
</html>

a less verbose version of the above to show a minimal example

<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title></title>
        <style>
            input[type='file']{
                width: 0px;
                height: 0px;
                opacity: 0;
                overflow: hidden;
                position: absolute;
                z-index: -1;
            }
        </style>
    </head>
    <body>
        <form>
            <input type='file' name='photo' id='photo' />
            <label for='photo'>
                <span>Put your Text here</span>
            </label>
        </form>
    </body>
</html>

Great tip, but why so much cruft? Padding, color, borders... `Choose your destiny` would have been enough alone. — Armen Michaeli, Nov 27 '19 at 13:33
it was basically copied from a page of mine where it had these styles - the OP can and no doubt will generate his/her own css and markup around the idea — Professor Abronsius, Nov 27 '19 at 13:36
I understand, that much was clear. It's just that I, personally, would have preferred a minimal example, without the extras. — Armen Michaeli, Nov 27 '19 at 13:37
no problem - I understand what you were saying... and a more streamlined version shall appear above as soon as I can find my crufting scissors and make the necessary adjustments ;-) — Professor Abronsius, Nov 27 '19 at 13:41

Is there a way to remove the "chose a file" from an input file type?

1 Answers1