I wanted to design an image uploader. For selecting an image we do this:
<input type="file" /> but I don't want to use that regular input, I have a div and I want that when user clicks on that, file selecting dialog opens and after that everything continues in standard way.
I want to use Angular.js rather than jQuery if possible because my project is under Angular.js
You dont need javascript to do this, please dont look at the inline style
<div style="position: relative; border: 1px solid red; width: 50px; height: 30px; line-height: 30px; text-align: center;" > Open <input type="file" style="opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%;" /> </div> Note you need to add more crossbrowser opacity lines
see demo http://jsfiddle.net/yp2dykn5/
Edited this seams to be a populair question/answer.
So i updated this answer with the information below including cross browser opacity lines support.
div { position: relative; border: 1px solid red; width: 50px; height: 30px; line-height: 30px; text-align: center; } .file_upload { opacity: 0.0; /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* Netscape or and older firefox browsers */ -moz-opacity: 0.0; /* older Safari browsers */ -khtml-opacity: 0.0; position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height:100%; }<form> <div> Open <input type="file" class="file_upload" /> </div> </form>I would give the <input> element the CSS property display: none; Then I would apply whatever styling needed to fit your situation to a <label> element linked to the <input> through the use of the for attribute (link to w3school page). In all browsers I know of, clicking on the <label> of an <input> works the same as clicking on the <input>.
This solution only using CSS and does not use JavaScript. The <label> can be styled in any way that a <div> can be styled.
Edit: I elaborated on my answer since I noticed the complexity of the top answer.
.hide { display: none; } .file_upload { border: 1px solid red; padding: 5px; }<label for="getFile1" class="file_upload">Open File</label> <input type="file" id="getFile1" class="hide"/>My suggestion with Jquery would be to keep a div and an input[type="file"].The input should be made hidden and trigger the click of input using JQuery, like below
HTML
<div id="id">Open</div> <input id="yourinputname" type="file" name="yourinputname" style="display: none;" /> jQuery
$('#id').on('click', function() { $('#yourinputname').trigger('click'); }); My File upload form with bootstrap and fontawesome
<html> <head> <link rel="stylesheet" type="text/css" href="path/to/bootstrap.css" /> <link rel="stylesheet" type="text/css" href="path/to/fontawesome-all.css" /> </head> <body> <form method="post" action="upload.php" enctype="multipart/form-data" > <div class="card mb-4 shadow-sm p-4"> <h4 class="my-0 font-weight-normal">Upload File</h4> <div class="card-body"> <h2 class="card-title"> <label style="cursor: pointer;" for="file_upload"> <span class="text-muted fa fa-upload"></span> </label> <input type="file" id="file_upload" class="d-none"/> </h2> </div> </div> </form> </body> </html> If you are using react: (sorry for the hideous indentation, stack would not let me format it correctly)
#getFile { display: none; } <label htmlFor="getFile"> <FontIcon iconName="photo" className="uploadIcon"/> <input type="file" id="getFile" /> </label> I'm using react and I wanted the file input to open when the enclosing div was clicked so I created a function:
function handleZoneClicked() { document.getElementById('dropzone-file-input').click(); } And the added the id to the div, and the made the input's display none.
