Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Chris-Code-Sample-1.2
//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";
});
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment