title: User uploading 2nd image before deleting 1st image
body: <p><strong>Background</strong> : </p>
  
  <p>User click on <strong>Mask</strong> &amp; upload their own image on the mask.</p>
  
  <p>Once image uploaded, <strong>Remove</strong> Text is displaying on the image.</p>
  
  <p>Once user click on Remove Text, we are <strong>deleting</strong> the uploaded image.</p>
  
  <p>Also User can drag uploaded image....</p>
  
  <p><a href="https://i.stack.imgur.com/5pTZe.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5pTZe.png" alt="enter image description here"></a></p>
  
  <p><strong>Issue</strong> :</p>
  
  <p>User can able to upload <strong>another [2nd] image</strong> before click on "Remove" button.</p>
  
  <p><strong>Requirement</strong> :</p>
  
  <p>User should be able to upload another image <strong>only after</strong> click on "Remove" button....</p>
  
  <p><strong>My work to get the solution</strong> :</p>
  
  <p>I added below 3 lines of code , after that i got solution in <a href="https://codepen.io/kidsdial/pen/EzQNJQ" rel="nofollow noreferrer">Codepen1</a> , but now i can't able to drag the uploaded image....</p>
  
  <pre><code>$("#"+String(target)).css("pointer-events", "none");
  $('.container').css('pointer-events','');
  $(canvasId).css("pointer-events","");
  </code></pre>
  
  <p><strong>Code Snippet</strong> :</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code> var target;
  const imageUrl = "https://i.imgur.com/RzEm1WK.png";
  
  let jsonData = {
      "layers": [{
          "x": 0,
          "height": 612,
          "layers": [{
              "x": 160,
              "src": "ax0HVTs.png",
              "y": 291,
              "height": 296,
              "width": 429,
              "name": "mask_1"
          }, {
              "x": 25,
              "src": "hEM2kEP.png",
              "height": 324,
              "width": 471,
              "y": 22,
              "name": "mask_2"
          }],
          "y": 0,
          "width": 612
      }]
  };
  
  const containerElement = $('#container');
  const fileUp = $('#fileup');
  let mask;
  
  $(function() {
  
      // Upload image onclick mask image
  
      containerElement.click(function(e) {
          var res = e.target;
          target = res.id;
          if (e.target.getContext) {
              // click only inside Non Transparent part
              var pixel = e.target.getContext('2d').getImageData(e.offsetX, e.offsetY, 1, 1).data;
              if (pixel[3] === 255) {
                  setTimeout(() =&gt; {
                      $('#fileup').click();
                  }, 20);
              }
          }
      });
  
      // Fetch mask images from json file - IGNORE this code
  
      function getAllSrc(layers) {
          let arr = [];
          layers.forEach(layer =&gt; {
              if (layer.src) {
                  arr.push({
                      src: layer.src,
                      x: layer.x,
                      y: layer.y,
                      height: layer.height,
                      width: layer.width,
                      name: layer.name
                  });
              } else if (layer.layers) {
                  let newArr = getAllSrc(layer.layers);
                  if (newArr.length &gt; 0) {
                      newArr.forEach(({
                          src,
                          x,
                          y,
                          height,
                          width,
                          name
                      }) =&gt; {
                          arr.push({
                              src,
                              x: (layer.x + x),
                              y: (layer.y + y),
                              height,
                              width,
                              name: (name)
                          });
                      });
                  }
              }
          });
          return arr;
      }
  
      function json(data) {
          var width = 0;
          var height = 0;
  
          let arr = getAllSrc(data.layers);
          let layer1 = data.layers;
          width = layer1[0].width;
          height = layer1[0].height;
          let counter = 0;
          let table = [];
  
          // container dimensions
          containerElement.css('width', width + "px").css('height', height + "px").addClass('temp');
          //end
  
          for (let {
                  src,
                  x,
                  y,
                  name
              } of arr) {
  
              //Get Height and width of mask image [ edit button ]
              var ImagePosition = arr;
              //code end
  
              var mask = $(".container").mask({
                  imageUrl: imageUrl,
  
                  // Fetch Mask images
                  maskImageUrl: 'http://i.imgur.com/' + src,
                  // end
  
                  onMaskImageCreate: function(img) {
                      // Mask image positions
                      img.css({
                          "position": "absolute",
                          "left": x + "px",
                          "top": y + "px"
                      });
                      // end
  
                  },
                  id: counter
              });
              // here
              table.push(mask);
              fileup.onchange = function() {
     // my work
            //  $("#"+String(target)).css("pointer-events", "none");
     // end
                  let mask2 = table[target];
                  const newImageLoadedId = mask2.loadImage(URL.createObjectURL(fileup.files[0]));
                  document.getElementById('fileup').value = "";
  
                  //  Remove image
  
                  $("&lt;br/&gt;&lt;span id=\"" + newImageLoadedId + "\" class=\"remove\"&gt;Remove&lt;/span&gt;").insertAfter(".masked-img" + newImageLoadedId).css({
                      "left": ImagePosition[newImageLoadedId].x + (ImagePosition[newImageLoadedId].width / 2) + "px",
                      "top": ImagePosition[newImageLoadedId].y + (ImagePosition[newImageLoadedId].height / 2 + 25) + "px"
                  });
  
                  $(".remove").click(function(event) {
      // my work
     // $('.container').css('pointer-events','');
      // end    
                      const canvasId = "canvas#" + event.currentTarget.id;
                      // Delete the uploaded image &amp; icon
                      const ctx = $("canvas")[event.currentTarget.id].getContext("2d");
                      ctx.fillStyle = "white"
                      ctx.fillRect(0, 0, 500, 500)
  
                      // Delete the Remove button
                      $(this).remove();
       // my work
      // $(canvasId).css("pointer-events","");
       //end
       
                  });
  
                  // Remove image code end here....
              };
              counter++;
          }
          return mask;
      }
      mask = json(jsonData);
  }); // end of function
  
  // Image code
  
  (function($) {
      window.JQmasks = [];
      $.fn.mask = function(options) {
          // This is the easiest way to have default options.
          var settings = $.extend({
              // These are the defaults.
              maskImageUrl: undefined,
              imageUrl: undefined,
              scale: 1,
              id: new Date().getUTCMilliseconds().toString(),
              x: 0, // image start position
              y: 0, // image start position
              onMaskImageCreate: function(div) {},
              rotate: 0,
          }, options);
  
          // Create the image properties
          settings.maskImage = new Image
          settings.image = new Image
  
          // set the cross-origin attributes
          settings.maskImage.setAttribute('crossOrigin', 'anonymous');
          settings.image.setAttribute('crossOrigin', 'anonymous');
  
          settings.maskImage.onload = function() {
              // once the mask is loaded, load the image
              container.loadImage(settings.imageUrl)
          }
  
          settings.image.onload = function() {
              // once the image is loaded, render to canvas
              container.drawMask()
              container.drawImage()
          }
  
          var container = $(this);
  
          let prevX = 0,
              prevY = 0,
              draggable = false,
              img,
              canvas,
              context,
              image,
              timeout,
              initImage = false,
              startX = settings.x,
              startY = settings.y,
              scale = settings.scale,
              div;
  
          container.mousePosition = function(event) {
              return {
                  x: event.pageX || event.offsetX,
                  y: event.pageY || event.offsetY
              };
          }
  
          container.selected = function(ev) {
              var pos = container.mousePosition(ev);
              var item = $(".masked-img canvas").filter(function() {
                  var offset = $(this).offset()
                  var x = pos.x - offset.left;
                  var y = pos.y - offset.top;
                  var d = this.getContext('2d').getImageData(x, y, 1, 1).data;
                  return d[0] &gt; 0
              });
  
              JQmasks.forEach(function(el) {
                  var id = item.length &gt; 0 ? $(item).attr("id") : "";
                  if (el.id == id)
                      el.item.enable();
                  else el.item.disable();
              });
          };
  
          container.enable = function() {
              draggable = true;
              $(canvas).attr("active", "true");
              div.css({
                  "z-index": 2
              });
          }
  
          container.disable = function() {
              draggable = false;
              $(canvas).attr("active", "false");
              div.css({
                  "z-index": 1
              });
          }
  
          container.drawMask = function() {
              canvas.width = settings.maskImage.width;
              canvas.height = settings.maskImage.height;
              context.save();
              context.beginPath();
              context.globalCompositeOperation = "source-over";
              // draw the masked image after scaling
              context.drawImage(settings.maskImage, 0, 0, settings.maskImage.width, settings.maskImage
                  .height);
              context.restore()
          };
  
          container.drawImage = function() {
              const img = settings.image
  
              settings.x = settings.x == 0 &amp;&amp; initImage ? (canvas.width - (img.width * settings.scale)) / 2 : settings.x;
              settings.y = settings.y == 0 &amp;&amp; initImage ? (canvas.height - (img.height * settings.scale)) / 2 : settings.y;
  
              context.globalCompositeOperation = 'source-atop';
              context.save();
              context.translate(settings.x + img.width / 2, settings.y + img.height / 2);
              context.rotate(settings.rotate);
              context.scale(settings.scale, settings.scale);
              context.translate(-(settings.x + img.width / 2), -(settings.y + img.height / 2));
              let width = img.width,
                  height = img.height;
              context.drawImage(img, settings.x, settings.y, width, height);
              context.restore();
              initImage = false;
          }
  
          container.onDragStart = function(evt) {
             // console.log('Draw started');
              if (evt.target.getContext) {
                  var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
  
                  $(canvas).attr("active", "true");
                  container.selected(evt);
                  prevX = evt.clientX;
                  prevY = evt.clientY;
                  var img = new Image();
                  evt.originalEvent.dataTransfer.setDragImage(img, 10, 10);
                  evt.originalEvent.dataTransfer.setData('text/plain', 'anything');
  
              }
          };
  
          container.onDragOver = function(evt) {
             // console.log('Drag over');
  
              if (evt.target.getContext) {
                  var pixel = evt.target.getContext('2d').getImageData(evt.offsetX, evt.offsetY, 1, 1).data;
                  if (pixel[3] === 255) {
                      if (draggable &amp;&amp; $(canvas).attr("active") === "true") {
                          var x = settings.x + evt.clientX - prevX;
                          var y = settings.y + evt.clientY - prevY;
                          if (x == settings.x &amp;&amp; y == settings.y)
                              return; // position has not changed
                          settings.x += evt.clientX - prevX;
                          settings.y += evt.clientY - prevY;
                          prevX = evt.clientX;
                          prevY = evt.clientY;
        
                          clearTimeout(timeout);
                          timeout = setTimeout(function() {
                              container.drawMask();
                              container.drawImage();
                          }, 1);
                      }
                  } else {
                      evt.stopPropagation();
                      return false;
                  }
              }
          };
  
          container.loadImage = function(imageUrl) {
              settings.y = startY;
              settings.x = startX;
              settings.scale = 1;
              settings.rotate = 0;
              prevX = prevY = 0;
              initImage = true;
              settings.image.src = imageUrl; // CHANGED
              // sirpepole Add this
              return settings.id;
          };
  
          container.loadMaskImage = function(imageUrl, from) {
              console.log('loading mask image from', imageUrl, from)
              canvas = document.createElement("canvas");
              context = canvas.getContext('2d');
              canvas.setAttribute("draggable", "true");
              canvas.setAttribute("id", settings.id);
              settings.maskImage.src = imageUrl // CHANGED
  
              div = $("&lt;div/&gt;", {
                  "class": "masked-img"
              }).append(canvas);
  
              div.find("canvas").on('dragstart', function(event) {
                  if (event.handled === false) return;
                  event.handled = true;
                  container.onDragStart(event);
              });
  
              div.find("canvas").on('touchend mouseup', function(event) {
                  if (event.handled === false) return;
                  event.handled = true;
                  container.selected(event);
              });
  
              div.find("canvas").bind("dragover", container.onDragOver);
  
              container.append(div);
              if (settings.onMaskImageCreate)
                  settings.onMaskImageCreate(div);
          };
          container.loadMaskImage(settings.maskImageUrl);
          JQmasks.push({
              item: container,
              id: settings.id
          })
          // Edit image
          div.addClass('masked-img' + settings.id);
          div.attr('data-id', settings.id);
          // ends
          return container;
      };
  }(jQuery));</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.container {
   background: silver;
   position: relative;
  }
  
  .container img {
   position: absolute;
   top: 0;
   bottom: 250px;
   left: 0;
   right: 0;
   margin: auto;
   z-index: 999;
  }
  
  .masked-img {
   overflow: hidden;
   position: relative;
  }
  
  .pip {
   display: inline-block;
   margin: 0;
   position: absolute;
  }
  
  .remove {
   background: #444;
   border: 1px solid black;
   color: white;
   text-align: center;
   cursor: pointer;
   position: absolute;
   z-index: 3;
  }
  
  .remove:hover {
   background: white;
   color: black;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;
      &lt;/script&gt;
  
      &lt;input id="fileup" name="fileup" type="file" style="display:none"&gt;
  
      &lt;div id="container" class="container"&gt;
      &lt;/div&gt; </code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is <a href="https://codepen.io/kidsdial/pen/arqpbK" rel="nofollow noreferrer">Codepen2</a> , <a href="https://jsfiddle.net/kidsdial1/sm5q3wok/1/" rel="nofollow noreferrer"> Jsfiddle</a> , <a href="https://pastebin.com/hDsMcP3c" rel="nofollow noreferrer">Pastebin</a></p>