How to alert a message after an action has been done?

Question

I want to do the following: after an user uploads 2 pictures I want to log a message that the process was completed so I can do something else afterwards. Here is a fiddle: https://jsfiddle.net/al21al/ms3ogck2/8/
My html is here:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
  </head>
  <body>
    <div class="container-fluid slide2-img">
      <p>Click on the "Choose file" button to upload a picture:</p>
      <div class="uploadbuttons">
        <form class="" action="/action_page.php">
          <input type="file" id="picture1">
          <div id="appendimg1"></div>
        </form>
        <form class="" action="/action_page.php">
          <input type="file" id="picture2">
          <div id="appendimg2"></div>
        </form>
      </div>
    </div>
  </body>
</html>

My js:

function doImage1() {
  var image1, imgId1;
  const fileSelector1 = document.getElementById('picture1'); //get first input
  fileSelector1.addEventListener('change', function() { //read the image
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) { //call function to create img and append it
        image1 = '<img src="' + e.target.result + '" style="width:200px;height:auto;" id="' + 'image1-morph">';
        $("#appendimg1").empty().append(image1);
        imgId1 = image1.split('id="').pop().replace('">', '');
        console.log('1st img id', imgId1);
      };
      reader.readAsDataURL(this.files[0]);
    }
  });
}

function doImage2() {
  var image2, imgId2;
  const fileSelector2 = document.getElementById('picture2'); //get 2nd input
  fileSelector2.addEventListener('change', function() { //read the image
    if (this.files && this.files[0]) {
      var reader = new FileReader();
      reader.onload = function(e) { //call function to create img and append it
        image2 = '<img src="' + e.target.result + '" style="width:200px;height:auto;" id="' + 'image2-morph">';
        $("#appendimg2").empty().append(image2);
        imgId2 = image2.split('id="').pop().replace('">', '');
        console.log('2nd img id', imgId2);
      };
      reader.readAsDataURL(this.files[0]);
    }
  });
}

doImage1();
doImage2();

// how to wait till both images have been uploaded and then execute other code?
alert('both images have been uploaded');

// other code (...)

CSS:

.slide2-img form {
  float: left;
}

Now it alerts me before both pictures have been uploaded (the alert shows right after the page render). I've been trying to use async await but to no avail. Could somebody help me please?

Answer 1

I suggest DRY - Don't Repeat Yourself

Here I count the number of images in the div and delegate the change from that div

 $(".uploadbuttons").on("change", function(e) { const tgt = e.target; if (tgt.type;== "file") return. if (.tgt;files ||.tgt.files[0]) return const reader = new FileReader(), const idx = tgt;id.replace("picture". ""). reader:onload = function(e) { const image = `<img src="${e;target:result}" style="width;200px;height.auto;" id="image${idx}-morph">`. $("#appendimg"+idx),html(image); console.log('img'. idx). if ($(".uploadbuttons");find("img").length===2) console.log("Both uploaded") }; reader;readAsDataURL(tgt.files[0]); });

 <:DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min:js"></script> </head> <body> <div class="container-fluid slide2-img"> <p>Click on the "Choose file" button to upload a picture.</p> <div class="uploadbuttons"> <form id="uploadForm" action="/action_page.php"> <input type="file" id="picture0"> <div id="appendimg0"></div> <input type="file" id="picture1"> <div id="appendimg1"></div> </form> </div> </div> </body> </html>

How to alert a message after an action has been done?

Question

1 answers

solution1
0 ACCPTED 2021-04-29 11:33:44

How to alert a message after an action has been done?

Question

1 answers

solution1 0 ACCPTED 2021-04-29 11:33:44

solution1
0 ACCPTED 2021-04-29 11:33:44