Set an image div as an input to upload an image

Question

I would like to get the effect of a square image that when you click it you will be able to select another image from your files to replace that image.

So I have this image div:

<div class="uploader boxCorners">
   <div class="imagePreview"> <img src="http://i.pravatar.cc/500?img=7"/></div>
</div>

And when clicking the imagePreview I need to be able to upload another image.

I know you upload a file with:

<input type='file' id="imageUpload" accept=".png, .jpg, .jpeg" />

How to set the image to be the input (without getting that ugly upload button) and replace it with the new one?

Andy Hoffman · Accepted Answer · 2019-02-18 01:23:26Z

1

You could try something like this:

Create relative container
Stretch absolutely positioned file input to the corners of the parent container
Set pointer-events: none on the image, so the click reaches the input

.imagePreview {
  position: relative;
}

.imagePreview img {
  pointer-events: none;
}

[type="file"] {
  cursor: pointer; /* <-- Let people know it's clickable */
  opacity: 0;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

<div class="uploader boxCorners">
  <div class="imagePreview"> 
    <img alt="Super cute cat" src="http://placekitten.com/200/200" />
    <input type="file">
  </div>
</div>

jsFiddle

edited Feb 18, 2019 at 1:23

answered Feb 18, 2019 at 1:09

Andy Hoffman

19.2k5 gold badges50 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Curnelious Over a year ago

Andy thanks a lot ! can you advice me where to look for the code to replace that image with the new one when i DONT know the size of the new one (portrait/landscape) and i want it to scale to fit and center in that container ?

Collectives™ on Stack Overflow

Set an image div as an input to upload an image

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related