How to Hide Text Field in HTML File Upload

How to hide text field in Html File Upload

I'd recommend hiding the whole thing and putting a separate button object which, when clicked, will end up clicking the input's browse button.

You can do this with CSS and javascript -- check out this article (actually the second time I've used this reference today).

How to hide input file type but still display the file uploaded?

I just write a basic code snippet for file open on a icon click. Try this I hope it'll help you out. Thanks

.chat-right {  display: flex;}
.fileUploadWrap {  background-image: url('https://cdn2.iconfinder.com/data/icons/budicon-document-2/16/69-document_-_attachment_clip_paperclip-512.png');  background-repeat: no-repeat;  background-size: contain;  position: relative;  height: 40px;  width: 40px;}
#hidden_upload_file_chatting {  opacity: 0;  position: absolute;  height: 100%;  width: 100%;}

<div class="chat-right">  <div class="fileUploadWrap">    <input type="file" name="file" class="form-control" id="hidden_upload_file_chatting">  </div>  <button type="submit" class="btn btn-flat" name="reply" value="reply" >Reply</button>  <button type="button" class="btn btn-flat" data-dismiss="modal" style="margin-left: 10px !important;">Close</button></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
}

making a input type file hidden with button

You can actually do it with label, you just have to hide the input.

<!-- 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>

Hiding textbox of the file Uploading browse button

Don't use display:none, use height:0;width:0;opacity:0;

Why?

When you use display:none the element is removed completely from the document structure hence is not sensed in your code.

Please note that a display of 'none' does not create an invisible box;
it creates no box at all.
http://www.w3.org/TR/CSS2/visuren.html#propdef-display

---

Related Topics