Hide Upload image button after user upload

Question

Once i Upload the image, i want to hide Upload Image button....

But currently its not hiding.....

<div class="container">

<label for="fileupa" class="customa">
    Upload Image
  </label>
  <input id="fileupa"  type="file" style="display:none;">


  <label for="fileupb" class="customb">
     Upload Image
  </label>
  <input id="fileupb"  type="file" style="display:none;">

<div class="minaimg masked-imga"    >
  <div  >
    <div class="minaimga">

      <img id="target_imga"  alt="">

      <div></div>

    </div>
  </div>
</div>

<div class="minaimg masked-imgb"    >
  <div >
    <div class="minaimgb">

      <img id="target_imgb"  alt="">

      <div></div>

    </div>
  </div>
</div>

</div>

<style>
.container {
    border: 1px solid #DDDDDD;
    width: 612px;
    height: 612px;
    position:relative;
    background:red;
}

.customa {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 350px;
    z-index: 1;
    left: 80px;
}

.customb {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer; 
  position: relative;
    top: 350px;
    z-index: 1;
    left: 180px;
}

.masked-imga

{

  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  

  width: 259px;
  height: 278px;
  position: absolute;
    top: 221px;
    left: 23px;

}



.masked-imgb 
{

  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;  

    width: 416px;
    height: 388px;

    position: absolute;
    top: 111px;
    left: 173px;

}

.minaimga
{
  display: block;
  background-color: white;
  height: 278px;
}

.minaimgb 
{
  display: block;
  background-color: white;
  height: 388px;
}
</style>

<script>
fileupa.onchange = e => {
 target_imga.src = URL.createObjectURL(fileupa.files[0]);   
}

fileupb.onchange = e => {
 target_imgb.src = URL.createObjectURL(fileupb.files[0]);   
}
</script>

Please let me know if you need any other information regarding this question....

What all i need is i want to hide upload image button....

Please help me to find solution.....

Thanks in Advance....

Possible duplicate of How do I hide the upload button once the file is uploaded? — Jake
– Jake, Commented Feb 6, 2019 at 10:58
@Jake Thanks for your link , i already checked that question, that question contains completely different code than my code..... and those answers didt worked in my case..... — user8444404
– user8444404, Commented Feb 6, 2019 at 10:59
@vickeycolors, you have already hide the upload image button by applying display:none in html. The text display Upload Image is the label. So you have to remove that label or you can hide that label from js on onchange event of file upload control. — Yogesh Patel
– Yogesh Patel, Commented Feb 6, 2019 at 11:30

Vikas Jadhav · Accepted Answer · 2019-02-06 11:31:38Z

1

Here is the updated fiddle:

fileupa.onchange = e => {
  target_imga.src = URL.createObjectURL(fileupa.files[0]);
  document.getElementById('fileupa1').style.display = 'none';
}

fileupb.onchange = e => {
  target_imgb.src = URL.createObjectURL(fileupb.files[0]);
  document.getElementById('fileupa2').style.display = 'none';
}

   .container {
  border: 1px solid #DDDDDD;
  width: 612px;
  height: 612px;
  position: relative;
  background: red;
}

.customa {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position: relative;
  top: 350px;
  z-index: 1;
  left: 80px;
}

.customb {
  border: 1px solid #ccc;
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  position: relative;
  top: 350px;
  z-index: 1;
}

.masked-imga {
  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart1.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 259px;
  height: 278px;
  position: absolute;
  top: 221px;
  left: 23px;
}

.masked-imgb {
  -webkit-mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  mask-image: url(http://139.59.24.243/ecom1/site/test/images/heart2.png);
  -webkit-mask-position: center center;
  mask-position: center center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  width: 416px;
  height: 388px;
  position: absolute;
  top: 111px;
  left: 173px;
}

.minaimga {
  display: block;
  background-color: white;
  height: 278px;
}

.minaimgb {
  display: block;
  background-color: white;
  height: 388px;
}
.button-div{
display: flex;
}
.button-div div{
align-items: center;
width: 50%;
}

<div class="container">

  <div class="button-div">
<div>
    <label for="fileupa" id="fileupa1" class="customa">
        Upload Image
    </label>
    <input id="fileupa" type="file" style="display:none;">
</div>
<div>     
    <label for="fileupb" id="fileupa2" class="customb">
        Upload Image
    </label>
    <input id="fileupb" type="file" style="display:none;">
</div> 
</div> 

  <div class="minaimg masked-imga">
    <div>
      <div class="minaimga">

        <img id="target_imga" alt="">

        <div></div>

      </div>
    </div>
  </div>

  <div class="minaimg masked-imgb">
    <div>
      <div class="minaimgb">

        <img id="target_imgb" alt="">

        <div></div>

      </div>
    </div>
  </div>

</div>

edited Feb 6, 2019 at 11:31

answered Feb 6, 2019 at 11:11

Vikas Jadhav

4,6923 gold badges22 silver badges39 bronze badges

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

3 Comments

user8444404 Over a year ago

Thanks a lot, its working fine.... but once i upload image in mask1 , than upload image button in mask2 will display left side....... but it should be in same place.....

Vikas Jadhav Over a year ago

@vickeycolors what kind of issue? tell me

user8444404 Over a year ago

please join chat : chat.stackoverflow.com/rooms/188255/…

Collectives™ on Stack Overflow

Hide Upload image button after user upload

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related