I have added custom functionality to the wordpress post form where a canvas image is generated, passed to an input and then I am trying to save it. But when I click the "Update" button I am shown the 404 error page.

In functions.php of my theme I have:

add_action( 'edit_form_advanced', 'addHtmlToForm' );

function addHTMLToForm(){

<input type="hidden" name="myimage" id="myImage" value="" />
<canvas width="700" height="700" id="mainImage"></canvas>
var img = new Image;
var mainCanvas = document.getElementById('mainImage');

img.crossOrigin = "anonymous";

img.onload = function(){


img.src = 'https://source.to.my.image.png';

Then I save the data through the function

add_action( 'save_post', 'saveExtraFields', 10, 3);

function saveExtraFields($ID){
    global $post, $wpdb;

    $mapFileName = false;

    if(isset($_POST['myimage']) && $_POST['myimage'] != ''){
        $uploadDir = $_SERVER['DOCUMENT_ROOT'].'/uploads/products/';

        $mapFileName = "{$ID}.png";

        $img = $_POST['myimage'];
        $img = str_replace('data:image/png;base64,', '', $img);
        $img = str_replace(' ', '+', $img);
        $data = base64_decode($img);
        $file = $uploadDir.$mapFileName;
        file_put_contents($file, $data);


1 Answer 1


As it happens it's a Firefox issue - both classic Firefox and Firefox developer edition. Other browsers work fine. Why it threw me to 404 page of the web-site remains a mystery to me.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.