So I’m making something for which users need to upload images from a canvas element (on the front end) using WordPress’s in-built Media Upload API.
I’ve successfully uploaded images with the API from a file input in a form:
<input type="file" name="async-upload" id="async-upload" size="40" />
...
<?php $new_attach_id = media_handle_upload( 'async-upload', $new_id ); ?>
and I’ve saved images from the canvas using my own script:
<script type="text/javascript">
...
var img = canvas.toDataURL("image/png");
...
ajax.send(img );
</script>
...
<?php
$imageData=$GLOBALS['HTTP_RAW_POST_DATA'];
$filteredData=substr($imageData, strpos($imageData, ",")+1);
$unencodedData=base64_decode($filteredData);
$fp = fopen( 'saved_images/canv_save_test.png', 'wb' );
fwrite( $fp, $unencodedData);
...
?>
Problem is, WordPress’s media_handle_upload() only accepts an index to the $_FILES array for the upload.
So the question is: How can I pass the image data from HTTP_RAW_POST_DATA to it? Could I make the $_FILES[‘tmp-name’] point to it somehow? Could I use another script as an intermediate step somehow? Could I unleash the monkeys on the typewriter until they come up with the answer?
Any help very very much appreciated!
Thanks,
Kane
EDIT: Solved
Thanks to @alex for his file_put_contents suggestion, and answers to another related question I posted here I now have this working. Solution: Send the unaltered base64 image data in the HTTP request, overwrite the tmp_file PHP generates and turn some security checks off for WP. Don’t know how safe that is but here’s the code for anyone who has the same problem:
<script type="text/javascript">
$('#save').click(function() {
// get image data from cavas
var img = canvas.toDataURL("image/png");
// open ajax request
var ajax = new XMLHttpRequest();
ajax.open("POST",script_url,false);
//ajax.open("POST","/dumpvars.php",false); // testing
// set headers
boundary_str = "AJAX-------------" + (new Date).getTime();
ajax.setRequestHeader('Content-Type', "multipart/form-data; boundary=" + boundary_str);
// callback for completed request
ajax.onreadystatechange=function()
{
if (ajax.readyState == 4)
{
// Write out the filename.
$("#ajax_out").html("Response: "+ajax.responseText+" End Response");
}
}
// BUILD REQUEST
var boundary = '--' + boundary_str;
var request_body = boundary + 'n'
// print all html form fields
$('#save_form input').each(function(){
request_body += 'Content-Disposition: form-data; name="'
+ $(this).attr('name') + '"' + 'n'
+ 'n'
+ $(this).val() + 'n'
+ 'n'
+ boundary + 'n';
});
// make filename
var filename = $('#save_form input[name="title"]').val();
filename = filename.replace(/s+/g, '-').toLowerCase(); // hyphenate + lowercase
filename = encodeURIComponent(filename) + (new Date).getTime() + ".png";
// add image
request_body += 'Content-Disposition: form-data; name="async-upload"; filename="'
+ filename + '"' + 'n'
+ 'Content-Type: image/png' + 'n'
+ 'n'
+ img
+ 'n'
+ boundary;
// Send request
ajax.send(request_body);
});
</script>
...
<?php
// Get transmitted image data
$loc = $_FILES['async-upload']['tmp_name'];
$file = fopen($loc, 'rb');
$contents = fread($file, filesize($loc));
fclose($file);
// Decode image data
$filteredData=substr($contents, strpos($contents, ",")+1);
$unencodedData=base64_decode($filteredData);
// Overwrite temp file
file_put_contents($loc, $unencodedData);
// Pass image data to WP Upload (attach to post)
$override['test_upload'] = false; // Override WP's upload security test (rewriting tmp_name made it fail)
$override['test_form'] = false;
$new_attach_id = media_handle_upload( 'async-upload', $new_id, array() , $override );
?>
You could
file_put_contents()
the data somewhere, and then make your own faux$_FILES
array to trick the WordPress function.Im going to update this post with how I went about doing this just in case somebody else is struggling with saving Canvas data to WordPress as a post attachment.
Instead of using media_handle_upload where you have to use the $_FILES array I used the media_sideload_image function. In order to do that all you have to do is just save your canvas image to a folder on your server then pass that URL to media_sideload_image and the post ID and that is it. It will attach that file to your post and copy the image to your uploads folder. You can create a TEMP_UPLOADS folder on your server to store your uploaded file then upon success of attaching it to a post deleting it manually.
the above sample does not delete the old temp file but you can easily figure out how to do that. I feel this solution is a lot simpler and works perfectly.