show only text in file input

Question

I am trying to add a text to show if user has selected an image to a custom file input.

Currently I have following element with static text:

I will add a text under the static text to show if file is chosen and file name.

I want to show only text in a file input. In other words I want to hide only the button element, not the text.

I think file input works somehow differently than all other html components.

One way of doing this could be to try and get hold of the text variable that is displayed on the right and on hover.

Possible duplicate of [Styling an input type="file" button](https://stackoverflow.com/questions/572768/styling-an-input-type-file-button) — FINDarkside, May 22 '18 at 08:41
Possible duplicate of [How to display file name for custom styled input file using jquery?](https://stackoverflow.com/questions/41542845/how-to-display-file-name-for-custom-styled-input-file-using-jquery) — Justinas, May 22 '18 at 08:49

score 3 · Accepted Answer · answered May 22 '18 at 10:03

$('.form-field-file').each(function(){
  var label = $('label', this);
  var labelValue = $(label).html();
  var fileInput = $('input[type="file"]', this);

  $(fileInput).on('change', function(){
  var fileName = $(this).val().split('\\').pop();

  if (fileName) { 
    $(label).html(fileName);
  } 
  else { 
    $(label).html(labelValue);
  }
   
 });
});

.form-field-file label {
    position: relative;
    display: inline-block;
    width: auto;
    height: 50px;
    padding: 50px 50px;
    background: #aaa;
    color: #000;
    border-radius: 2px;
    font-size: rem(13);
    line-height: 44px;
    font-weight: 700;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    text-transform: uppercase;
    letter-spacing: 2px;
    cursor: pointer;
    transition: background 0.25s ease-in-out;
}
.form-field-file label:hover, .form-field-file label:active {
    background: shade(#336699, 34%);
}
.form-field-file label:after {
    position: absolute;
    top: 0;
    z-index: 2;
    display: block;
    font-family: 'FontAwesome';
}
.form-field-file input[type="file"] {
    position: absolute;
    z-index: -1;
    width: 0.1px;
    height: 0.1px;
    opacity: 0;
    overflow: hidden;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="form-field form-field-file">
 <label for="file-upload">CHOOSE FILE...</label>
 <input type="file" name="file-upload" id="file-upload"/>
</div>

score 2 · Answer 2 · answered May 22 '18 at 09:35

Here is a handy article.

...there is no JavaScript-less way to indicate if any files were selected...

There is a trick to do it though. You can put file input below the custom input like this:

.inputfile {
  overflow: hidden;
  position: absolute;
  z-index: -1;
  margin-left: 12px;
  outline: none;
}

.inputfile+label {
  background: #DDD;
  cursor: pointer;
  border: 1px solid #AAA;
  outline: none;
  padding: 5px 8px;
}

.inputfile+label:hover {
  box-shadow: 0 0 5px 1px #DDD;
}

.inputfile+label:active {
  box-shadow: 0 0 5px 2px #CCC;
}

.inputfile+label {
  cursor: pointer;
}

.inputfile+label * {
  pointer-events: none;
}

<input type="file" name="file" id="file" class="inputfile" />
<label for="file">Choose a file</label>

Or if you just want the text and no button here is an example

.inputfileholder {
  overflow: hidden;
  max-width: 200px;
  height: 21px;
  position: relative
}

.inputfileholder .inputfile {
  position: absolute;
  left: -90px;
  outline: none;
}

<div class="inputfileholder">
  <input type="file" name="file" id="file" class="inputfile" />
</div>

The left value of inputfile and height in inputfileholder may be different depending on language. Here is just an example.

score -1 · Answer 3 · answered May 22 '18 at 09:28

-1

You can use this Simple Stuff for select file using button as given bellow Example.

.hide{
display:none;
}

.btn-file{
background:lightblue;
padding:50px;
border:none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<input type="file" class="hide" id="file-btn">
<button type="button" class="btn-file" onclick="$('#file-btn').click()">Upload File</button>

answered May 22 '18 at 09:28

Rudra

535
4
16

2

First of all, in here you use jQuery which is unnecessary, secondly, you don't update text wich is what OP wanted... – Krzysztof Janiszewski May 22 '18 at 09:36
where is mentioned that here do not allow to user jquery? – Rudra May 22 '18 at 09:43
1

There is no jquery tag added – Krzysztof Janiszewski May 22 '18 at 09:44

show only text in file input

3 Answers3