Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

like image 783
Fcoder Avatar asked Jul 31 '15 17:07

Fcoder


1 Answers

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>
like image 178
Ebuka Avatar answered Sep 20 '22 18:09

Ebuka