function processImage(evt) {
  const LOADER = document.querySelector(".loader");
  document.querySelector("#output").innerHTML = "";

  LOADER.classList.add("show");
  readFileAsImage(evt.target.files[0])
    .then((file) => loadImage(file))
    .then((img) => loadCanvas(img))
    .then((srcCanvas) => sliceSquare(srcCanvas))
    .finally(() => LOADER.classList.remove("show"));

  evt.target.value = null; //Ensure event will fire if same file chosen again
}
/**
  * @desc process input input file
  * @param event evt - onChange event object from file button
*/
@desc process input input file
@param event evt - onChange event object from file button
@desc process input input file @param event evt - onChange event object from file button
function processImage(evt) {
  const LOADER = document.querySelector(".loader");
  document.querySelector("#output").innerHTML = "";
  LOADER.classList.add("show");
  readFileAsImage(evt.target.files[0])
    .then((file) => loadImage(file))
    .then((img) => loadCanvas(img))
    .then((srcCanvas) => sliceSquare(srcCanvas))
    .finally(() => LOADER.classList.remove("show"));
  evt.target.value = null; 
}
function processImage ( evt ) { const LOADER = document . querySelector ( ".loader" ) ; document . querySelector ( "#output" ) . innerHTML = "" ; LOADER . classList . add ( "show" ) ; readFileAsImage ( evt . target . files [ 0 ] ) . then ( ( file ) => loadImage ( file ) ) . then ( ( img ) => loadCanvas ( img ) ) . then ( ( srcCanvas ) => sliceSquare ( srcCanvas ) ) . finally ( ( ) => LOADER . classList . remove ( "show" ) ) ; evt . target . value = null ; }
@desc process input input file
 @param event evt - onChange event object from file button
@desc process input input file @param event evt - onChange event object from file button
//Ensure event will fire if same file chosen again
