title: javascript resize and preview multiple image before upload
body: <p>I'm newbie in JS and React. I am using React and I have multiple file input in a form, I wish if the user select image the images should be resized and previewed before user click upload. Now the resizing, previewing and uploading are all fine, the problem is when  I change a file input, the other file inputs preview and upload are all changed synchronously! any help will be appreciated.</p>
  
  <p>This is the code:</p>
  
  <p>render():</p>
  
  <pre><code>render(){
    return(
      ...
      &lt;label&gt;Image1
      &lt;input type="file" id="img1" on Change={this.handleChange} /&gt;
      &lt;/label&gt;
      &lt;br/&gt;
      &lt;img id="img1_preview" src="" height="100" /&gt;
      &lt;label&gt;Image2
      &lt;input type="file" id="img2" on Change={this.handleChange} /&gt;
      &lt;/label&gt;
      &lt;img id="img2_preview" src="" height="100" /&gt;
      ...
    )
  }
  </code></pre>
  
  <p>function():</p>
  
  <pre><code>...
  handleChange(event) {
    ...
    /* handle all image input change */
    if (event.target.id.includes('img')) {
      var field = event.target.id;
      var preview = document.getElementById(field + '_preview');
      var file = event.target.files[0];
      var reader = new FileReader();
      reader.onload = function(readerEvent) {
        var image = new Image();
        image.onload = function(imageEvent) {
          var canvas = document.createElement('canvas');
          var max_size = 800; /* max size */
          var width = image.width, height = image.height;
          if (width &gt; height) {
            if (width &gt; max_size) {
              height *= max_size / width;
              width = max_size;
            }
          } else {
            if (height &gt; max_size) {
              width *= max_size / height;
              height = max_size;
            }
          }
          canvas.width = width;
          canvas.height = height;
          canvas.getContext('2d').drawImage(image, 0, 0, width, height);
          var dataUrl = canvas.toDataURL('image/jpeg');
          /* Utility function to convert a canvas to a BLOB */
          var dataURLToBlob = function(dataURL) {
            var BASE64_MARKER = ';base64,';
            if (dataURL.indexOf(BASE64_MARKER) === -1) {
              var parts = dataURL.split(',');
              var contentType = parts[0].split(':')[-1];
              var raw = parts[1];
              return new Blob([raw],{type:contentType});
            }
            var parts = dataURL.split(BASE64_MARKER);
            var contentType = parts[0].split(':')[1];
            var raw = window.atob(parts[1]);
            var rawLength = raw.length;
            var uInt8Array = new Uint8Array(rawLength);
            for (var i = 0; i &lt; rawLength; ++i) {
              uInt8Array[i] = raw.charCodeAt(i);
            }
            return new Blob([uInt8Array],{type:contentType});
          }
          /* End Utility function to convert a canvas to a BLOB */
          var resizedImage = dataURLToBlob(dataUrl);
          $.event.trigger({
            type: "imageResized",
            blob: resizedImage, 
            url: dataUrl
          });
        }
        image.src = readerEvent.target.result;
      }
      reader.readAsDataURL(file);
      $(document).on("imageResized",function(event1){
        if (event1.blob &amp;&amp; event1.url) {
          var blob = event1.blob, url = event1.url;
          # set state, later will be submit to server
          this.setState({[field]:blob}); 
          /* preview */
          var reader1 = new FileReader();
          reader1.addEventListener("load",function(){
            preview.src = url;
          }, false);
          reader1.readAsDataURL(blob);
          /* end preview */
        }
      })
    }
  </code></pre>
  
  <p>the page:
  <a href="https://i.stack.imgur.com/35ZkH.png" rel="nofollow noreferrer">the page image</a></p>