Input Type=File Show Only Button

<!-- head --><link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<!-- body --><label for="upload">      <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span>      <input type="file" id="upload" style="display:none"></label>

Hide choose file button of input[type='file'] without hiding file choosen name with simple css

Here you can easily remove choose file button of input type file without losing filename label with just simple CSS.

input[type=file]::-webkit-file-upload-button {
    visibility: hidden;
}

How Can I Hide *Only* the Button (Not Entire Element) for the Input Type File in a Django Form?

I have create a demo for you, check:

https://jsfiddle.net/lmgonzalves/uLmLc3xt/5/

The icon is with font-awesome, and here is the code.

HTML:

<label id="upload-file-container" for="photo">
    <input id="photo" type="file" name="photo"/>
    <span class="upload-file-wrapper">
        <i class="fa fa-cloud-upload"></i>
        <span>Click here to upload file</span>
    </span>
</label>

CSS:

#upload-file-container{
    position: relative;
    cursor: pointer;
}

#upload-file-container input{
    position: relative;
    left: 150px; /* Maybe you need to adjust this */
    top: 5px;
}

#upload-file-container .upload-file-wrapper{
    position: absolute;
    left: 0;
    top: -1px;
    background-color: lightgray;
    border: 1px solid gray;
    padding: 5px 0 6px;
    width: 250px;
    text-align: center;
}

Hide / show depending on input type=file value

Add this code into your javascript

$("#btn").toggle(false);

$("#fld").change(function(){

if($(this).val() != "")
{
 $("#btn").toggle();
} 
else{
 $("#btn").toggle();
}
});

$("#remove_button").click(function(){
  $("#fld").val('');
  document.getElementById("btn").style.visibility = "hidden";
})

and remove id tag from your html..it has two ids for the button
change it like

<input id="btn" type="submit" value="Upload / Edit picture" name="upload_picture" 
class="btn" />

show only text in file input

$('.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>

How can I hide the Input type File Button without hiding the Text Field?

It is not possible to hide the button and show the TextField. Anyway, u can copy the value of the document name and use it on a different TextField. You could do this:

$("#NewTextField").val($('#FileUpload').val().split("\\")[$('#FileUpload').val().split("\\").length - 1]);
$("#FileUpload").hide();

NewTextField is the TextField where you will show the name, FileUpload is the button with the file atached to it. You just copy the value of the name, splitting by "\" so you just get the name and not the entire path.

You will probably need to do it when you print the file, so put the code inside this:

$("#PrintButton").click(function () {
 //Code above
}

---

Related Topics