How to upload a image in woocommerce checkout page and link it to the order

2 Views

I’m trying to upload an image in checkout page and tie that to the order. So i tried to add custom fields and when i var_dump $_FILES i get empty array. Why is this happening? 

function add_file_field(){
    echo '<input type="file" id="checkoutupload" name="checkoutupload">';
}
add_action('woocommerce_after_order_notes','add_file_field');

The field is available in checkout page but when i try to validate it, i couldn’t get anything form $_FILES instead i get an empty array

Read More
function output_file_datas(){
    $filename = plugin_dir_path(__FILE__).'test.txt';
        ob_start();
    var_dump($_FILES);
    $data = ob_get_clean();
    file_put_contents($filename, $data);
}
add_action('woocommerce_checkout_process','output_file_datas');

In here test.txt is a text file where i used to debug.

I even added form enctype attribute in jquery. So i thought the file will be available but not. 

jQuery(document).ready(function(){
       jQuery('form.checkout').attr('enctype','multipart/form-data');
});

I don’t know why is this happening. Could any one tell me why it is not uploading the image. It happens in this context only. I tried to add a form in the same checkout page. If i do upload the image from the form i can able to get it. But i couldn’t get it through woocommerce checkout form.

Is there something woocommerce is doing?

I tried with ajax form to upload image using jQuery Form Plugin which is already available from wordpress. In here i can able to get the image but i’m afraid of the logic because once the user upload the image and if he didn’t place the order then the uploaded image may go waste.

So i need the file uploaded along with the form and tie it to the order. How to do this? Why i couldn’t get $_FILES when i try to get from woocommerce_checkout_process Hook?

I know there is no problem with normal file upload in same page but with different form. When i try from woocommerce checkout form then there i couldn’t get the $_FILES.

They are using ajax before place order, is that the reason am not getting the $_FILES array. If so can i replace the normal ajax and use jQuery Form Plugin so that i can get the $FILES

Any help or reference about the problem will be very helpful to me.

Post Views: 2

Related posts

Leave a Reply

2 comments 

  1. ///Add the File Upload Field in Shipping Fields Group 
add_filter( 'woocommerce_shipping_fields', 'woo_filter_upload_shipping' );

function woo_filter_upload_shipping( $address_fields ) { 
//  $address_fields['file_upload']['required'] = true;

$address_fields['file_upload'] = array(
    //'label'     => __('Upload your ID', 'woocommerce'),
    'required'  => false,
    'class'     => array('form-row-wide'),
    'clear'     => true
);

return $address_fields;
}

//Use this function to show Upload field on your form.

function add_file_field(){

  $uploadFile   = "";

  $uploadFile   .='<div id="upload_CNIC_image">';
  $uploadFile .='<input id="file_upload" name="file_upload" type="file" multiple="true">';
  $uploadFile .='<span id="uploadComplete">';
  $uploadFile .='</span>';
  $uploadFile .='</div>';
  echo $uploadFile;
}
add_action('woocommerce_after_order_notes','add_file_field');

    Must use uploadify class for this purpose to fulfill your requirement to upload a file.

  2. I have used the following hooks to manage form posted values:

    woocommerce_order_status_on-hold, woocommerce_order_status_processing, woocommerce_order_status_completed

    AND

    Following hooks to manage form fields:

    woocommerce_checkout_after_customer_details, woocommerce_after_cart_table

    I hope these hooks will help you.

    P.S. I was in a process to manage it as a plug and play thing so finally shaped it as a plugin!