title: Upload multiple canvas images through javascript loop
body: <p>I am trying to make an upload script which resizes multiple images client side before the <em>saveimage.php</em> handles them. The reason for this is because they will be uploaded at an outside location where there might be very slow internet.</p>
  
  <p>I have been able to find pieces of code around here which helped me put it together. I am only a beginner so it's probably very messy!</p>
  
  <p>What it currently does is it checks whenever files are being input in the 'file_input' field. Then it looks at the amount of files and loop through them until every file has been placed in the canvas and upload while it's in there.</p>
  
  <p><strong>However, the problem is:</strong> when I don't add an alert for each file, the loop goes too fast and only processes 1 or 2 out of 10 images for example. Because the upload script will go faster than the canvas can be updated with a new image.</p>
  
  <p>This is my current page, simplified to the core:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;script type="text/javascript" src="http://code.jquery.com/jquery.min.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;form&gt;
      &lt;input id="file_input" type='file' multiple /&gt;
  &lt;/form&gt;
  
  &lt;div id="preview"&gt;
      &lt;canvas id="canvas"&gt;&lt;/canvas&gt;
  &lt;/div&gt;
  
  &lt;script&gt;
  
      var input = document.getElementById('file_input');
      input.addEventListener('change', handleFiles);
  
      function handleFiles(e) {
  
          var files = input.files;
          alert(files.length +" files are being uploaded!"); // display amount of files for testing purpose
  
          for (var i = 0; i &lt; files.length; ++i) {
  
              alert("Upload file number: "+i); // display file # for testing purpose, when this is removed the script will go too fast
  
              var MAX_HEIGHT = 1000;
              var ctx = document.getElementById('canvas').getContext('2d');
              var img = new Image;
  
              img.onload = function(){
                  if(img.height &gt; MAX_HEIGHT) {
                      img.width *= MAX_HEIGHT / img.height;
                      img.height = MAX_HEIGHT;
                  }
                  var ctx = canvas.getContext("2d");
                  ctx.clearRect(0, 0, canvas.width, canvas.height);
                  preview.style.width = img.width + "px";
                  preview.style.height = img.height + "px";
                  canvas.width = img.width;
                  canvas.height = img.height;
                  ctx.drawImage(img, 0, 0, img.width, img.height);
  
                  // the canvas should contain an image now and this will send it through saveimage.php
                  var myDrawing = document.getElementById("canvas");
                  var drawingString = myDrawing.toDataURL("image/jpeg", 0.5);
                  var postData = "canvasData="+drawingString;
                  var ajax = new XMLHttpRequest();
                  ajax.open("POST",'saveimage.php',true);
                  ajax.setRequestHeader('Content-Type', 'canvas/upload');
                  ajax.onreadystatechange=function()
                      {
                          if (ajax.readyState == 4);
                      }
                      ajax.send(postData);
              };
  
              img.src = URL.createObjectURL(e.target.files[i]);
          }
      }
  
  &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>And this is my <em>saveimage.php</em> which works well, but just for the complete overview:</p>
  
  <pre><code>&lt;?php
  
  if (isset($GLOBALS["HTTP_RAW_POST_DATA"]))
  {
      $rawImage=$GLOBALS['HTTP_RAW_POST_DATA'];
      $removeHeaders=substr($rawImage, strpos($rawImage, ",")+1);
      $decode=base64_decode($removeHeaders);
  
      // check if the file already exists and keep adding +1 intil it's unique
      $i = 1;
      while(file_exists('uploads/image'.$i.'.jpg')) {           
          $i++;
      }
  
      $fopen = fopen( 'uploads/image'.$i.'.jpg', 'wb' );
      fwrite( $fopen, $decode);
      fclose( $fopen );
  
  }
  
  ?&gt;
  </code></pre>
  
  <p><strong>A bit of extra information:</strong></p>
  
  <ul>
  <li>I have added canvas, because as far as I can understand that's the
  only way to resize images client side. In the final script it will be
  set to hidden.</li>
  <li>If the canvas could be skipped and the data sent to <em>saveimage.php</em>
  immediately then that would solve the problem too I think.</li>
  <li>As I said I am not very experienced with javascript, so if there is a
  much simpler way to achieve this goal. Please let me know!</li>
  </ul>
  
  <p>Thanks in advance!</p>