15

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

6 Answers 6

30

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>

15

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"/>

6

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');
});

See the fiddle

1

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

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

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.