Remove input file button and style the files chosen

Question

I am trying to create an upload form which takes multiple images. I want to be able to remove the "Choose Files" button but keep the "No file chosen" to inform the user what files they are going to be uploading.

I understand that I can set the opacity to 0 on the input type file styling, but this removes both the "Choose Files" and "No file chosen" text.

Here is the codepen of the image uploader so far.

To summarise:

I want to remove the Choose Files button
Keep the No file chosen text.

Here is the HTML:

<div class="upload">
    <div class="container">
        <div class="row">
            <div class="col-md-12">
                <h1>Would you like to <span style='color: lightgreen;'>Upload</span> or <span style='color: orangered;'>Delete</span> a file?</h1>
                <div style="position: relative; height: 275px;">
                    <form action="" method="post" enctype="multipart/form-data" class="formUp">

                        <input type="file" name="fileToUpload[]" id="fileToUpload" accept="image/*" multiple="multiple"><p>Click here to upload images.</p></input>
                        <input type="submit" value="Upload Images" name="submitUpload" />
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

Here is the CSS:

.up {
    border: none;
}

.upload {
    padding-top: 6%;
}

.upload input[type='file'] {
    outline: none;

    width: 100%;
    height: 100%;
    position: absolute;
}

.formUp {
    border: 4px dashed black;
    width: 400px;
    height: 200px;
    position: absolute;
}

.formUp p {
    text-align: center;
    width: 100%;
    height: 100%;
    line-height: 170px;
    font-weight: bold;
    font-size: 1.5em;
}

.upload input[type='submit'] {
    margin-top: 2%;
    width: 100%;
    height: 20%;
}

.upload input[type='submit'] {
  background: #0AC986;
  dispaly: inline-block;
  width: 100%;
  font-size: 16px;
  height: 50px;
  color: #fff;
  text-decoration: none;
  border: none;
  border-radius: 4px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
}

.upload input[type='submit']:hover {
    color: #F37272; 
    background-color: palegreen;
}

.upload input[type='submit'] {
    -o-transition: all .3s;
    -moz-transition: all .3s;
    -webkit-transition: all .3s;
    -ms-transition: all .3s;
}

.upload input[type='submit']:hover {
    color: red;
}

camslice · Accepted Answer · 2017-07-06 08:57:57Z

3

The text-indent property will manipulate the position of the Choose Files button but leave the No file chosen text.

    .upload input[type='file']
    {
        text-indent: -999em;
        outline: none;
        width: 100%;
        height: 100%;
        position: absolute;
    }

answered Jul 6, 2017 at 8:57

camslice

6358 silver badges9 bronze badges

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

Comments

Nanang Mahdaen El-Agung · Accepted Answer · 2015-06-19 20:44:47Z

2

AFAIK, we can't do much thing to style input file. What we can do is using opacity and appearance trick and makes the input file covering parent element, so user still receive the click event of the input file.

Also you need to use javascript/jQuery to handle what you need. If using javascript/jQuery is not problem for you, below the sample implementation to your [Codepen][1].

[1]: http://codepen.io/mahdaen/pen/Ejwodb

answered Jun 19, 2015 at 20:44

Nanang Mahdaen El-Agung

1,42410 silver badges14 bronze badges

1 Comment

Jonathan Davies Over a year ago

Is there a way possible to get rid of the Click here to upload images. when images are added? @Nanang

Collectives™ on Stack Overflow

Remove input file button and style the files chosen

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related