Is there a way to upload an image before checkout completion without a plugin?

Question

I have this plugin I've made for uploading an image before an order can be completed, but for the life of me I can't get the image to upload. $_FILES will always return nothing, I'm not sure why though. I'd like it to be that the checkout won't be completed until the image is uploaded, is this even possible? *I've been told that woocommerce uses ajax for the cart

<?php
    /*
        @package            UploadTest
        @wordpress_plugin
        Plugin Name:            UploadTest
        Plugin URI:             null
        Description:            
        Author:                 Goodship
        Version:                0.0.2
        Author URI:             www.Goodship.co.za
    */

    function add_image(){
        $testLog = fopen(plugin_dir_path( __FILE__ )."testicle.txt","w") or exit ("Unable to open file!");
        //if they DID upload a file...
        if($_FILES['testUpload']['name']){
            //if no errors...
            if(!$_FILES['testUpload']['error']){
                //now is the time to modify the future file name and validate the file
                $new_file_name = strtolower($_FILES['testUpload']['tmp_name']); //rename file
                if($_FILES['testUpload']['size'] > (1024000)) //can't be larger than 1 MB
                {
                    $valid_file = false;
                    $message = 'Oops!  Your file\'s size is to large.';
                }

                //if the file has passed the test
                if($valid_file){
                    //move it to where we want it to be
                    move_uploaded_file($_FILES['testUpload']['tmp_name'], plugin_dir_path( __FILE__ ).'uploads/'.$new_file_name);
                    $message = 'Congratulations!  Your file was accepted.';
                }
            }
            //if there is an error...
            else
            {
                //set that to be the returned message
                $message = 'Ooops!  Your upload triggered the following error:  '.$_FILES['testUpload']['error'];
            }
        }
        fwrite ($testLog ,$message);
        fwrite ($testLog ,var_dump($_FILES));
        fclose ($testLog);
    }

    add_action( 'woocommerce_checkout_update_order_meta', 'add_image');


    function add_checkout_notice() {
        echo    '<input type="file" name="testUpload" />';
    }
    add_action( 'woocommerce_checkout_before_customer_details', 'add_checkout_notice');

    ?>

For the checkout completion just use JS to check if the input field of the image is empty or not. If it's empty put a `disabled` on a complete checkout button, so that you cannot complete the checkout. Then once you've uploaded the image (I'm assuming JS must be involved here somehow), just remove the `disabled` from the checkout button. As for why it doesn't upload, no clue to that... — dingo_d, May 09 '16 at 08:28
@Maha Dev the checkout is submitted normally, with whatever process woocommerce uses — Captain Dando, May 09 '16 at 09:41
@dingo_d the input field is definitely not empty, but $_FILES is for whatever reason — Captain Dando, May 09 '16 at 09:41
you might update the question to include that woo-commerce uses ajax to handle the cart. you wont get a proper answer otherwise — David, May 10 '16 at 00:05
if your `$_FILES` variable is completely empty, then I'd be curious to see what your html form looks like, in particular the input name and form action. — Jeff Puckett, May 10 '16 at 16:17
Hi @Jeff Puckett, I've inserted the input into the form used for capturing billing and shipping information in woocommerces checkout form. the input I use resides in a form with the following properties: `
` — Captain Dando, May 11 '16 at 09:31

Bhavik · Answer 1 · 2016-05-10T07:22:30.667

4

You need to call below function in your child theme.

function add_image($order_id){
  // Do your code of upload image.
} 
add_action( 'woocommerce_checkout_order_processed', 'add_image',  1, 1  );

edited May 10 '16 at 07:22

answered May 10 '16 at 07:17

Bhavik

183
1
1
13

unfortunately, there was no effect, and the test file logs nothing – Captain Dando May 10 '16 at 09:42

score 2 · Answer 2 · edited May 23 '17 at 11:44

Woocommerce checkout will always happens via Ajax ( I am not sure from what version it's been like this )

PLUGIN-DIR/woocommerce/assets/frontend/checkout.js this is the file which is responsible for the checkout action.

So uploading files from checkout page is not possible unless you intended to modify the checkout.js file by yourself.

If you still prefer uploading file from checkout page, you may refer this answer.

score 1 · Answer 3 · answered May 09 '16 at 01:10

1

Have you given a look at Advanced Custom Field? https://www.advancedcustomfields.com/

You can easily achieve what you are trying to do.

Have a look at this https://www.advancedcustomfields.com/resources/acfupload_prefilter/

answered May 09 '16 at 01:10

Shoeb Mirza

912
1
11
30

I need to do this without plugins, the amount of items uploaded will be indeterminable on post edit, and will vary. – Captain Dando May 09 '16 at 09:40

Is there a way to upload an image before checkout completion without a plugin?

3 Answers3