Chris-Code-Sample-1.2

Chris-Code-Sample-1.2.js

//sc_media_upload.js

window.onload = function() {
  var fileToUpload = saQuery("fileToUpload");
  //
  fileToUpload.onchange = function(e) {
      e.preventDefault();
      sendData();
  }
  //2019.08.08.CT:
  saQuery("imageUploadButton").addEventListener("click", function()
  {
    saQuery("fileToUpload").click();
  });
  //2021.01.30.CT:
  if(bCurrentUserIsAdmin) {
    saQuery("post_image").addEventListener("click", function(e) {
      e.preventDefault();
      sendImageUrl();
    });        
    saQuery("getMedia").addEventListener("click", function(e) {
      e.preventDefault();
      var resultNum = saQuery("resultNum").value;
      getMedia(resultNum);
    });
  }
}

function bImageSizeValid(nImageWidth, nImageHeight )
{
  //ORIGINAL: (upload_Image_width_Allowed < img.width || upload_Image_height_Allowed < img.width)
  //  (upload_Image_width_Allowed < nImageWidth || upload_Image_height_Allowed < nImageHeight);
  //
  let bValid = false;
  bValid = ((upload_Image_width_Allowed == nImageWidth) && (upload_Image_height_Allowed == nImageHeight));
  console.log("voice-bImageSizeValid="+bValid);
  return bValid;
}

function htmlImageSizeInvalidMessage(nImageWidth, nImageHeight )
{
  let sHTML = "<font color='red'>Invalid Size: Your image size is " 
    + nImageWidth + " x " 
    + nImageHeight + " but we require " 
    + upload_Image_width_Allowed+" x "
    + upload_Image_height_Allowed+" size image. </font>";
  return sHTML;
}

function sendData() {
  //2019.08.08.CT : $ajax_url -> $oMedia->s_url_ajax
  var file_data = saQuery("fileToUpload").files[0];
  var form_data = new FormData();
  form_data.append('fileToUpload', file_data);
  form_data.append('action', 'postWPAPIMedia');

  var file_ext = file_data.name.substr(file_data.name.lastIndexOf('.')+1,file_data.name.length);

  if (saQuery("fileToUpload").value == "") {
    saQuery("msg").style.display = "block";
    saQuery("msg").innerHTML = "<div class='error'>Choose a file to upload.</div>";
  } 
  else if(sa_media_upload_file_types.indexOf("."+file_ext) == -1) {
    saQuery("msg").innerHTML = "<font color='red'>This file type ("+file_ext+") is not supported. </font>";
    saQuery("msg").style.display = "block";
  }
  else {
    if (saQuery("fileToUpload").files[0].type.indexOf("image") == -1) {
      uploadFile(form_data);
    } 
    else {
      let img = new Image();
      img.onload = () => {                
          //if(upload_Image_width_Allowed < img.width || upload_Image_height_Allowed < img.height) 
          //2021.01.10.CT:
          if (!bImageSizeValid(img.width,img.height)) {
            saQuery("msg").innerHTML = htmlImageSizeInvalidMessage(img.width,img.height);
            saQuery("msg").style.display = "block";
          } 
          else {
            uploadFile(form_data);
          }
      }
      img.src = window.URL.createObjectURL(file_data);
    }
  }
}

function uploadFile(form_data) {
  saQuery("msg").style.display = "none";
  var percentValue = '0%';
  saQuery("bar").style.backgroundPosition = percentValue;
  saQuery("progressDivId").style.display = "block";
  //  
  axios.post(sa_ajax_url, form_data, {
    onUploadProgress: function (progressEvent) {
      const totalLength = progressEvent.lengthComputable ? progressEvent.total : progressEvent.target.getResponseHeader('content-length') || progressEvent.target.getResponseHeader('x-decompressed-content-length');
      if (totalLength !== null) {
        var perc = ( progressEvent.loaded / totalLength ) * 100;
        perc = Math.round(perc);
        var percentValue = perc + '%';
        saQuery("bar").style.backgroundPosition = percentValue;
      }
    }
  })
  .then(function (res) {
    saQuery("fileToUpload").value = "";
    if(bCurrentUserIsAdmin) {
      saQuery("image_path").value = "";
    }
    saQuery("progressDivId").style.display = "none";
    saQuery("msg").innerHTML = res.data;
    saQuery("msg").style.display = "block";
  });
}

function sendImageUrl(){
  var image_path = saQuery("image_path").value;
  if (!image_path.trim()) {
    saQuery("msg").style.display = "block";
    saQuery("msg").innerHTML = "<div class='error'>Please enter Image url.</div>";
  } 
  else {
    var form_data = new FormData();
    form_data.append('image_path', image_path);
    form_data.append('action', 'postWPAPIMedia');

    let img = new Image();
    img.onload = () => {
      //if(upload_Image_width_Allowed < img.width || upload_Image_height_Allowed < img.height) {
      //2021.01.10.CT: 
      if (!bImageSizeValid(img.width,img.height)) {
        saQuery("msg").innerHTML = htmlImageSizeInvalidMessage(img.width,img.height);
        saQuery("msg").style.display = "block";
      } else {
        uploadFile(form_data);
      }
    }
    img.onerror = img.onabort = () => {
      //it's not image
      uploadFile(form_data);
    }
    img.src = image_path;
  }
}

function getMedia(resultNum) {
axios.get(sa_ajax_url, {
  params: {
    action: 'getWPAPIMedia',
    resultNum: resultNum
  }
})
.then(function (res) {
    saQuery("media").innerHTML = res.data;
    saQuery("media").style.display = "block";
  });
}