phpwordpresswoocommerceuploadmedia-library

Modifying plugin that uploads to the WP Uploads folder


I can't get any information or help from the plugin author, but what it does currently is supply a signature box on the Woocommerce checkout page. Once the order is submitted it saves and uploads the signature to the /wp-content/uploads/ folder, and displays it on the Woocommerce order page as well as adds it to the Media Library inside wp-admin.

What I'd like it to do is save the signature to the order page but not add it into the Media Library as we have no need for 1000's of signatures inside the media library.

Also if I could change the location that it saves the images to into a sub folder(ie. /wp-content/uploads/signatures/) that would be extremely helpful as well.

Code is below. Any help would be much appreciated!

add_action('woocommerce_after_order_notes', 'DSCFW_add_signature_field', 50);
function DSCFW_add_signature_field($post)
{

?>
    <div class="validate-required validate-signature" style="position: relative;">
        <p><?php echo esc_html('Please sign below confirming that you understand you are purchasing a subcription which will renew automatically.', 'digital-signature-checkout-for-woocommerce'); ?> <span class="bp-required-field-label"><abbr class="required" title="required">*</abbr></span></p>

        <canvas id="dscfw_sign" name="signaturefield" width="300" height="100" required></canvas>

        <input class="clearButton" type="button" value="X">
        <input id="signPadInput" type="hidden" required name="signpad" value="">
    </div>

<?php
}

add_action('woocommerce_checkout_update_order_meta', 'DSCFW_product_get_data');
function DSCFW_product_get_data($post)
{     
    if (is_string($_REQUEST['signpad']) && strrpos($_REQUEST['signpad'], "data:image/png;base64", -strlen($_REQUEST['signpad'])) !== FALSE) {

        $signature_imgid = DSCFW_save_image($_REQUEST['signpad'], 'fff');
    }

    if (isset($_REQUEST['signpad'])) {
        update_post_meta($post, 'signpad', $signature_imgid);
    }
}

function DSCFW_save_image($base64_img, $title)
{

    // Upload dir.
    $upload_dir  = wp_upload_dir();
    $upload_path = str_replace('/', DIRECTORY_SEPARATOR, $upload_dir['path']) . DIRECTORY_SEPARATOR;

    $img             = str_replace('data:image/png;base64,', '', $base64_img);
    $img             = str_replace(' ', '+', $img);
    $decoded         = base64_decode($img);
    $filename        = $title . '.jpeg';
    $file_type       = 'image/jpeg';
    $hashed_filename = md5($filename . microtime()) . '_' . $filename;

    // Save the image in the uploads directory.
    $upload_file = file_put_contents($upload_path . $hashed_filename, $decoded);

    $attachment = array(
        'post_mime_type' => $file_type,
        'post_title'     => preg_replace('/\.[^.]+$/', '', basename($hashed_filename)),
        'post_content'   => '',
        'post_status'    => 'inherit',
        'guid'           => $upload_dir['url'] . '/' . basename($hashed_filename)
    );

    $attach_id = wp_insert_attachment($attachment, $upload_dir['path'] . '/' . $hashed_filename);
    require_once(ABSPATH . 'wp-admin/includes/image.php');
    return $attach_id;
}

add_action('woocommerce_admin_order_data_after_billing_address', 'DSCFW_checkout_field_display_admin_order_meta', 10, 1);
function DSCFW_checkout_field_display_admin_order_meta($order)
{
    $post_attach_file = $order->get_meta('signpad');
    $signimage = wp_get_attachment_url($post_attach_file, true);
?>  
    <p><strong style="display:block;">User Signature:</strong>
    <a href="<?Php echo esc_url($signimage); ?>" target="_blank"><img id="signature" src="<?Php echo esc_url($signimage); ?>" width="100"></a></p>
    <script>
        jQuery(document).ready(function($) {
            function resize() {
                var signatureBlock = document.querySelector('#signature');
                var checkoutContainer = document.querySelector('.order_data_column');
                checkoutWidth = $(checkoutContainer).width();
                signatureBlock.width = checkoutWidth;
            }
            $(window).on("resize", resize);
            $(window).on("load", resize);

        });
    </script>
<?php
}

I have tried the below code by just adding the /signatures/ sub folder into the $upload_path, and that does move the location where the images are uploaded to, however inside the Woocommerce order page the image isn't displayed as it says I don't have the right permissions to view it.

function DSCFW_save_image($base64_img, $title)
{

    // Upload dir.
    $upload_dir  = wp_upload_dir();
    $upload_path = str_replace('/', DIRECTORY_SEPARATOR, $upload_dir['path']). '/signatures/' . DIRECTORY_SEPARATOR;

    $img             = str_replace('data:image/png;base64,', '', $base64_img);
    $img             = str_replace(' ', '+', $img);
    $decoded         = base64_decode($img);
    $filename        = $title . '.jpeg';
    $file_type       = 'image/jpeg';
    $hashed_filename = md5($filename . microtime()) . '_' . $filename;

    // Save the image in the uploads directory.
    $upload_file = file_put_contents($upload_path . $hashed_filename, $decoded);

    $attachment = array(
        'post_mime_type' => $file_type, 
        'post_title'     => preg_replace('/\.[^.]+$/', '', basename($hashed_filename)),
        'post_content'   => '',
        'post_status'    => 'inherit',
        'guid'           => $upload_dir['url'] . '/signatures/' . basename($hashed_filename)
    );

    $attach_id = wp_insert_attachment($attachment, $upload_dir['path'] . '/signatures/' . $hashed_filename);
    require_once(ABSPATH . 'wp-admin/includes/image.php');
    return $attach_id;
}

Solution

  • I haven't tested this but it might work to save the file url to the order meta instead of an attachment id

    function DSCFW_save_image($base64_img, $title)
    {
    
        // Upload dir.
        $upload_dir  = wp_upload_dir();
        $upload_path = str_replace('/', DIRECTORY_SEPARATOR, $upload_dir['path']) . DIRECTORY_SEPARATOR . 'signatures' . DITECTORY_SEPARATOR;
    
        $img             = str_replace('data:image/png;base64,', '', $base64_img);
        $img             = str_replace(' ', '+', $img);
        $decoded         = base64_decode($img);
        $filename        = $title . '.jpeg';
        $file_type       = 'image/jpeg';
        $hashed_filename = md5($filename . microtime()) . '_' . $filename;
    
        // Save the image in the uploads directory.
        $upload_file = file_put_contents($upload_path . $hashed_filename, $decoded);
    
        
        return $upload_dir['url'] . '/signatures/' . $hashed_filename;
    }
    
    add_action('woocommerce_admin_order_data_after_billing_address', 'DSCFW_checkout_field_display_admin_order_meta', 10, 1);
    function DSCFW_checkout_field_display_admin_order_meta($order)
    {
        $signimage = $order->get_meta('signpad');
    ?>  
        <p><strong style="display:block;">User Signature:</strong>
        <a href="<?Php echo esc_url($signimage); ?>" target="_blank"><img id="signature" src="<?Php echo esc_url($signimage); ?>" width="100"></a></p>
        
    ...rest of code