CODEWITHSUNDEEP
javascriptjqueryhtmlcss
AzmahQi
AzmahQi

Reputation: 378

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

I am doing a printable document, and I want the user to add a File to it. The tricky part is I don't want the button to appear when the document is printed I only want the TextField to show the name of the document.

Is it possible to hide the button and only show the TextField?

Upvotes: 1

Views: 2041

Answers (3)

AzmahQi
AzmahQi

Reputation: 378

It isn't the best solution but does the work:

$("#FileUpload").change(function () {
        $("#NewTextField").val($('#FileUpload').val().split("\\")[$('#FileUpload').val().split("\\").length - 1]);
    });
input[type="file"]{
    min-width: 0;
    width: 0;
    color: transparent;
    position:relative;
    height: 0;

}
@media print {  
input[type='file'] {
        opacity: 0;
    }
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
  <input type="text" id="NewTextField" disabled><input id="FileUpload" name="document" type="file">
</p>
<p>
 <input name="Print" value="Print" onclick="window.print();" type="button"/>
</p>

Now it's up to you... You can add some CSS to the input when it's being printed u can hide the button print also...

Upvotes: 1

Autenticorick
Autenticorick

Reputation: 71

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
}

Upvotes: 1

cloned
cloned

Reputation: 6742

I don't think there is an out of the box solution but something like this sould work:

You can use this technique like for printing href attributes after links. You can add the filename to a data-attribute when the user uploads it and then just show the data-attribute on printing: 

@media print{
       input[type=file]{display:none}
       input[type=file]:after {content: attr(data-filename)}
}

You would need some Javascript that adds the filename to the attribute data-filename

Upvotes: 0

Related Questions