CODEWITHSUNDEEP
javascriptangularjshtml
Fcoder
Fcoder

Reputation: 9216

Opening file select when clicking on a div not file input tag

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

Upvotes: 17

Views: 37171

Answers (6)

Baha
Baha

Reputation: 408

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.

Upvotes: 0

Xion Dark
Xion Dark

Reputation: 3434

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

Upvotes: 16

Jackie Santana
Jackie Santana

Reputation: 1458

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>

Upvotes: 0

Ebuka
Ebuka

Reputation: 634

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>

Upvotes: 1

Raymond Nijland
Raymond Nijland

Reputation: 11602

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>

Upvotes: 31

Lal
Lal

Reputation: 14810

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

Upvotes: 6

Related Questions