CODEWITHSUNDEEP
html
crodev
crodev

Reputation: 1491

How to upload image in HTML after clicking on div element

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?

Upvotes: 0

Views: 4551

Answers (3)

That Geezer
That Geezer

Reputation: 13

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>

Upvotes: 1

jorscobry
jorscobry

Reputation: 123

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

Upvotes: 0

Aman Seth
Aman Seth

Reputation: 305

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

Upvotes: 1

Related Questions