title: how to resize image before saving to firebase storage
body: <p>I upload and save uploaded file to firebase database using this code. </p>
  
  <p>html </p>
  
  <pre><code> &lt;input type="file" accept="image/*"  onchange="showMainImage(this)" /&gt;
    &lt;div class="form-group pmd-textfield pmd-textfield-floating-label" &gt;
    &lt;label class="control-label"&gt;Enter a description for image&lt;/label&gt;
    &lt;textarea required class="form-control" id="product-note1"&gt;&lt;/textarea&gt;
   &lt;/div&gt;
  &lt;img id="thumbnil" style="width:150px; margin-top:10px;"  src="" alt="image"/&gt;
  
  
  
   &lt;div class="form-group pmd-textfield pmd-textfield-floating-label" &gt;
     &lt;label class="control-label"&gt;Enter a description for image&lt;/label&gt;
    &lt;textarea required class="form-control" id="product-note2"&gt;&lt;/textarea&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Js </p>
  
  <pre><code> function showMainImage(fileInput) {
  
  var files = fileInput.files;
  for (var i = 0; i &lt; files.length; i++) {
      var file = files[i];
      var imageType = /image.*/;
      if (!file.type.match(imageType)) {
          continue;
      }
      var img = document.getElementById("thumbnil");
      img.file = file;
      var reader = new FileReader();
      reader.onload = (function(aImg) {
          return function(e) {
              aImg.src = e.target.result;
          };
      })(img);
      reader.readAsDataURL(file);
  }
  
  firebase.auth().onAuthStateChanged((user) =&gt; {
      if (user) {
  
          database = firebase.database();
          var Cataloguedatabase = HoneyBox_CatalogueDB.database();
          var Cataloguestorage = HoneyBox_CatalogueDB.storage();
  
  
          var metadata = {
              'contentType': file.type
          };
          // Push to child path.
          // [START oncomplete]
  
          var storageRef = Cataloguestorage.ref(ProductID + "/ProductImages/" + file.name);
          storageRef.put(file, metadata).then(function(snapshot) {
  
              var url = snapshot.downloadURL;
              itemImageUrl.push(url);
  
              var catalogueupdates = {};
              var updates = {};
  
              return Cataloguedatabase.ref().update(catalogueupdates);
  
          })
      }
  })
  }
  </code></pre>
  
  <p>I deleted some of the code to only show what I think its minimal and important. </p>
  
  <p>The code works perfectly however, the image size are usually very large and when they are retrieve they take some time to download. I want to resize the uploaded image and create three different image sizes before sending to firebase storage. For example I want to resize the image to </p>
  
  <p>thumbnail (136 X 136)</p>
  
  <p>singleimage (454 X 527) </p>
  
  <p>Since file is what is being put in firebase storage, how can I change the file width and height to match the above dimensions?
  How can I achieve that in the code above?</p>