0

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

But currently its not hiding.....

enter image description here

https://codepen.io/kidsdial/pen/RvLexz

<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?](https://stackoverflow.com/questions/46475356/how-do-i-hide-the-upload-button-once-the-file-is-uploaded) – Jake Feb 06 '19 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..... –  Feb 06 '19 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 Feb 06 '19 at 11:30
  • @YogeshPatel Thanks for your suggestion.... –  Feb 06 '19 at 11:35

1 Answers1

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>
Vikas Jadhav
  • 4,597
  • 2
  • 19
  • 37
  • 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..... –  Feb 06 '19 at 11:14
  • @vickeycolors what kind of issue? tell me – Vikas Jadhav Feb 13 '19 at 10:16
  • please join chat : https://chat.stackoverflow.com/rooms/188255/discussion-between-vickey-colors-and-cieunteung –  Feb 13 '19 at 10:17