We Keep Coding

Saving images uploaded using ImagesLoader

I am trying to wire up the ImagesLoader plugin, which allows uploading multiple images. It has a nice drag-n-drop UI but I just can't figure out how to get the images that were uploaded. I cannot find any documentation.
Link to the plugin page: ImagesLoader
Here is the javascript from the demo:
<script type="text/javascript">
// Ready
$(document).ready(function () {
// Create image loader plugin
var imagesloader = $('[data-type=imagesloader]').imagesloader({
minSelect: 3
,imagesToLoad: [{"Url":"./img/Nespresso001.jpg","Name":"Nespresso001"},{"Url":"./img/Nespresso002.jpg","Name":"Nespresso002"}]
});
//Form
$frm = $('#frm');
// Form submit
$frm.submit(function (e) {
var $form = $(this);
var files = imagesloader.data('format.imagesloader').AttachmentArray;
var il = imagesloader.data('format.imagesloader');
if (il.CheckValidity())
alert('Upload ' + files.length + ' files');
e.preventDefault();
e.stopPropagation();
});
});
The images are saved in the object "files". Here is a screen shot of the contents from the inspector:
I tried converting to json and posting, but that only generates an error.
$.ajax({
url: 'process-images.php',
type: 'POST',
data: JSON.stringify(files),
contentType: 'application/json; charset=utf-8',
dataType: 'json',
cache: false,
error: function() {alert("ERROR");},
success: function() {alert("OK");}
});
The rest of the code works just like the demo. Looks like everything needed for the uploaded images is stored in "files". I just need to get the data back to php and I can pull it apart from there. But right now, the original submit code just dies or my addition aborts with an error.
THANKS!

I hope it is not too late to answer.
You just need to loop through the base64 encoded image object, decoding and saving each image to the disk.
// Sample code
foreach(json_decode($request->input('files')) as $file) {
$name = $file->FileName
$imagePath = storage_path('app/public/images/');
file_put_contents($imagePath.$name, base64_decode($file->Base64));
}

Update in first php call not working in firefox.. but works in chrome and explorer

I have an HTML page that populates data using PHP - testcommand.php.
On a button press the page should update a record in MySQL- updmeal_order.php, and then call a new webpage - add-meals.php.
This works in chrome and explorer but in firefox, it does not. In firefox the button fires and calls the new webpage but does not do the update.
If I remove the calling of the new webpage, the update does work.
Thanks in advance
Osie
$(document).ready(function () {
var xparam = getUrlParameter('ref');
$("body").delegate("#addmeals", "click", function(event){
// update table in mysql
event.preventDefault();
var mo_desc = document.getElementById('mo_desc').value;
var bh_no = document.getElementById('bh_no').value;
var updparam = bh_no+mo_desc;
//alert (xparam);
var url = "../js/updmeal_order.php";
// var dataString = $(this).serialize().replace(/\'/g,'\\\'');
// POST values in the background the the script URL
$.ajax({
type: "POST",
url: url,
data: ({xparam: updparam}),
success: function (data)
{
//var myJSON = JSON.stringify(data);
//alert (myJSON);
}
});
// call a new webpage
var path = '../command/add-meals.php?ref='+bh_no;
window.location.href=path;
$.ajax({
url: path,
type: "POST",
// data: ({mo_desc: mo_desc}),
success: function()
{
// var arraydata = $.parseJSON(data);
// $("#command").html(arraydata[0]);
}
});
/*
*/
});
// display data in main htm page
$.ajax({
url: '../command/testcommand.php',
type: "POST",
data: ({xparam: xparam}),
success: function(data){
var arraydata = $.parseJSON(data);
$("#command").html(arraydata[0]);
}
});
});

The problem I had was that pressing the back button(from add-meals.php) on firefox seems to rollback the mysql update, whereas on chrome/explorer it is commited... bizarre?
Calling the page first and then the update seems to have solved this

Wordpress do shortcode using ajax

I'm trying to do shortcode by ajax, i'm getting page content using ajax , and shortcode's added to content are displaying like plain text. I was searching for solution but there's nothing that's help me solve this problem.
For example i have metaslider shortcode in content, and i want to display it on several pages. The main problem is that there will be diffrent slider on every page, so i need load sliders depends on their ID.
get page content method:
ajax_get_post: function(postid) {
var loader = $('#pop-single .loader');
loader.show();
var data = {
'action': 'get_single_post',
'post_id': postid
};
$.ajax({
type: 'POST',
url: ajaxurl,
data: data,
success: function(data) {
var content = $('#pop-single .popup');
loader.hide();
content.show();
//console.log(data);
var post = JSON.parse(data),
title = post.post_title,
content = post.post_content;
$('#pop-single h1.title').html(title);
$('#pop-single .content-ajax').html(content);
},
error: function(data) {
alert('nope');
}
});
},
get post php - functions.php
add_action('wp_ajax_get_single_post', 'ajax_get_single_post');
add_action('wp_ajax_nopriv_get_single_post', 'ajax_get_single_post');
function ajax_get_single_post() {
if (!empty($_POST['post_id'])) {
$id = $_POST['post_id'];
$post = get_page($id);
echo json_encode($post);
}
die();
}
Now in same way i want to display any shortode added to content, or maybe there's other way, but it should be done dynamically, that's why im using ajax.
Thank's in advice for any help or example how to do that.

Can't save image via HTML canvas

I'm having difficulties saving my canvas. I'm new to javascript so I think it could be a syntax issue.
I've got some vars saved in a function:
var imageView = document.getElementById("imageView");
var canvasData = imageView.toDataURL("image/png");
var postData = "canvasData="+canvasData;
If I add the following line it displays the image correctly:
imgData = $('#i').append($('<img/>', { src : canvasData }));
However, I have another function that I want to pass the base64 code in so I added:
var the_data = "test= "+imageView.toDataURL("image/png");
It does print out a base64 code, but just the blank canvas (not with the drawing the user has added).
If I add the following it doesn't work:
var the_data = "test= "+canvasData;
What am I doing wrong?
This is a basic jsfiddle of what I'm trying to do: http://jsfiddle.net/sMSeX/

Just a little hint from my side for uploading HTML5 canvas image data:
I am working on a project for a print-shop and had some problems due to uploading images to the server that came from an HTML5 canvas element. I was struggling at least for one hour and I did not get it to save the image correctly on my server.
I get the image data as Base64 decoded from the canvas element via
var can = document.getElementsByTagName('canvas');
var dataURL = can[0].toDataURL("image/jpg");
//dataURL = dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
console.log('data url: '+dataURL);
Once I set the
contentType option of my jQuery ajax call to 'application/x-www-form-url-encoded' :
$.ajax({
url: 'index.php?page=upload-image',
type: 'post',
contentType: 'application/x-www-form-urlencoded',
//data: '{ "imageData" : "' + dataURL + '" }',
data: dataURL,
beforeSend: function() {
$('.text-danger').remove();
},
complete: function() {
},
success: function(json) {
console.log('upload complete');
}
});
everything went the right way and the base64-encoded data was interpreted correctly and successfully saved as an image.
Maybe someone helps that!

jQuery function to check if background page fully loaded?

I was wondering if it's possible to use the $().ready function to test if another page is fully loaded.
Here I'm talking about a newsfeed updater, where the function will send a POST request to a background php page to update the database, and then, using ajax, the newsfeed will reload to grab new data.
function send_data(){
var head = $("#headline").val();
var news = $("#news").val();
var info = '&headline='+head+'&news='+news; //update string
$.ajax({
url: 'recieve_update.php', //updating php file
type: 'POST',
data: info //data string
});
$().ready(function() {
$("#newsfeed").load("load_news.php"); //reload the newsfeed viewer
});
}

Use the callback function of $.ajax():
$.ajax({
url: 'recieve_update.php', //updating php file
type: 'POST',
data: info, //data string
success: function(){
$("#newsfeed").load("load_news.php"); //reload the newsfeed viewer
}
});

I believe something alone these lines would be what you're looking for. Straight from the jQuery source. http://api.jquery.com/jQuery.ajax/
$.ajax({
url: "test.html",
context: document.body
}).done(function() {
$(this).addClass("done");
});