How to upload image in HTML after clicking on div element - html

Question

I know there is <input type="file"/> but I have an <img> inside of <div> and I would love to ask for user to upload an image after clicking on that <div>. This is the code I have:
<div class="container">
<img src="..." alt="Profile image" class="profileImg">
<div class="overlay">
<i class="fas fa-pencil-alt text"></i>
</div>
</div>
Is this possible only in HTML or do I need JS or something else?

Answer 1

function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#image')
.attr('src', e.target.result)
.width(150)
.height(200);
};
reader.readAsDataURL(input.files[0]);
}
}
.uploader {
opacity: 0;
position: absolute;
z-index: 1;
left: 0;
top: 0;
}
.container {
position: relative
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<img src="..." alt="Profile image" id='image' class="profileImg">
<input type='file' class='uploader' onchange="readURL(this);" />
<div class="overlay">
<i class="fas fa-pencil-alt text"></i>
</div>
</div>
You can take reference from above code. I click on image to add src to it and show it

Answer 2

If I am reading you right, you want to click an image to initiate the open file dialogue box, or prompt users on mobile to take a picture. You wanted it in just HTML, you can try this, however, it has a tiny bit of inline CSS.
Cheers,
Martin
<label for='image'>
<img src='image/source.png'>
<input type='file' id='image' style='display:none;' name='image'>
</label>

Answer 3

Custom styling of file inputs can be tricky, but there is a helpful article on codrops here.
Basically, you want to style and customize <input type="file"> in a semantic, accessible way using the <label> element.
HTML:
<input type="file" name="file" id="file" class="inputfile" />
<!-- The magic that makes it work -->
<label for="file">Choose a file</label>
CSS:
/* Hiding the default input */
.inputfile {
width: 0.1px;
height: 0.1px;
opacity: 0;
overflow: hidden;
position: absolute;
z-index: -1;
}
/* Styling the new label */
.inputfile + label {
font-size: 1.25em;
font-weight: 700;
color: white;
background-color: black;
display: inline-block;
padding: 40px;
}
.inputfile:focus + label,
.inputfile + label:hover {
background-color: red;
}
/* Accessibility */
.inputfile + label {
cursor: pointer; /* "hand" cursor */
}
/* Keyboard Navigation */
.inputfile:focus + label {
outline: 1px dotted #000;
outline: -webkit-focus-ring-color auto 5px;
}