var fileinput = document.getElementById('fileinput')

var preview = document.getElementById('preview')

const max_width = 100
const max_height = 100

var form = document.getElementById('form')

function processfile(file: File) {
  return new Promise((resolve) => {
    if (!/image/i.test(file.type)) {
      alert('File ' + file.name + ' is not an image.')
      return false
    }

    // read the files
    var reader = new FileReader()
    reader.readAsArrayBuffer(file)

    reader.onload = function (event: Event) {
      // blob stuff
      if (!reader.result) return
      var blob = new Blob([reader.result]) // create blob...
      window.URL = window.URL || window.webkitURL
      var blobURL = window.URL.createObjectURL(blob) // and get it's URL

      // helper Image object
      var image = new Image()
      image.src = blobURL
      //preview.appendChild(image); // preview commented out, I am using the canvas instead
      image.onload = function () {
        // have to wait till it's loaded
        var resized = resizeMe(image) // send it to canvas
        resolve(resized)
      }
    }
  })
}

// === RESIZE ====

function resizeMe(img: HTMLImageElement) {
  var canvas = document.createElement('canvas')

  var width = img.width
  var height = img.height

  // calculate the width and height, constraining the proportions
  if (width > height) {
    if (width > max_width) {
      //height *= max_width / width;
      height = Math.round((height *= max_width / width))
      width = max_width
    }
  } else {
    if (height > max_height) {
      //width *= max_height / height;
      width = Math.round((width *= max_height / height))
      height = max_height
    }
  }

  // resize the canvas and draw the image data into it
  canvas.width = width
  canvas.height = height
  var ctx = canvas.getContext('2d')

  ctx && ctx.drawImage(img, 0, 0, width, height)

  return canvas.toDataURL('image/jpeg', 0.7) // get the data from canvas as 70% JPG (can be also PNG, etc.)
}
