I’ve successfully built a form that allows users to input their order ID, expense amount, and a reason for the expense. When the user submits the form, the expense and reason for expense are added to the metadata of the submitted order ID.
Here’s the entire code:
<form id="expense_form" class="expense_form" action="" method="post">
<label for="order-id">Order ID:</label>
<input class="exp_order_no" id="exp_order_no" type="text" pattern="[0-9]*" placeholder="Enter the Order Number" required>
<label for="expense">Expense:</label>
<input class="expense_amt" id="expense_amt" type="text" pattern="[0-9]*" placeholder="Enter the expense amount" required>
<label for="reason">Reason for Expense:</label>
<textarea class="expense_reason" id="expense_reason" id="reason" name="reason" rows="4" placeholder="Enter Message" required></textarea>
<input type="submit" class="exp_but" id="exp_but" value="Submit">
</form>
<script>
jQuery(document).ready(function($) {
$('#expense_form').on('submit', function(e) {
e.preventDefault();
var orderid = $('#exp_order_no').val();
var expense = $('#expense_amt').val();
var expense_reason = $('#expense_reason').val();
// console.log (orderid);
// console.log (expense);
// console.log (expense_reason);
$.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'POST',
data: {
action:'update_custom_field_order_expense_php',
orderid: orderid,
expense: expense,
expense_reason:expense_reason
},
success: function( response ) {
console.log( 'Custom field updated successfully.' );
alert('Expense Submitted Successfully !!');
location.reload();
},
error: function( response ) {
console.log( 'Failed to Submit Expense.' );
alert('Failed to Submit Expense. Contact Online Team.');
location.reload();
}
});
});
});
</script>
<?php
add_action( 'wp_ajax_update_custom_field_order_expense_php', 'update_custom_field_order_expense_php' );
add_action('wp_ajax_nopriv_update_custom_field_order_expense_php', 'update_custom_field_order_expense_php');
function update_custom_field_order_expense_php() {
$order_id = $_POST['orderid'];
$order_expense = $_POST['expense'];
$order_expense_reason = $_POST['expense_reason'];
$order = wc_get_order( $order_id );
if ( is_user_logged_in()) {
$current_user = wp_get_current_user();
$current_user_id = $current_user->ID;
$driver_id = get_post_meta($order_id, 'lddfw_driverid', true);
//$current_date = date_i18n( 'j F, Y', strtotime( $current_date_time ) );
foreach ( $order->get_meta_data() as $meta ) {
if ( $meta->key === 'Driver Expense') {
$expense_exist=$meta->value;
}
}
if (($current_user_id == $driver_id) && (empty($expense_exist))) {
$order->update_meta_data('Driver Expense', $order_expense);
$order->update_meta_data('Driver Expense Reason', $order_expense_reason);
$order->save();
wp_send_json_success();
} else {
http_response_code(403);
wp_send_json(array('error' => 'Access denied'));
}
} else {
http_response_code(401);
wp_send_json(array('error' => 'Authentication required'));
}
exit;
}
?>
However, I’m now facing a challenge in adding an important functionality: image upload for proof of expense.
Image Upload for Proof of Expense: I want users to be able to upload images as proof of their expenses. This is crucial for verification purposes and record-keeping. Ideally, users should be able to attach one or more images related to their expense.
I’m not sure where to start with implementing this functionality. If anyone has experience or suggestions on how to achieve this, I would greatly appreciate your guidance and insights.
Here are some specific questions I have:
How can I enable image uploads within my form?
What is the best way to store these uploaded images and link them to the respective order ID?
I’ve created a directory /wp-content/uploads/2023/Expense_images and want all the images to be stored in here.
Any help or code examples related to this functionality would be highly valuable. Thank you in advance for your assistance!
2
Answers
UPDATE:
I tried debugging the code and fix and possible issues but I'm unable to activate the PHP code via code snippet plugin as It's giving me error status 400. I'm giving the whole code bellow, please let me know how I can solve this.
Update you form to include the new unput fields:
Modify your JavaScript code to handle file uploads along with the other form data. You will need to use the FormData object to send the file(s) to the server using the AJAX request.
Then update your update_custom_field_order_expense_php function to handle file uploads and save them to the desired directory:
This code will handle multiple file uploads and store them in the /wp-content/uploads/2023/Expense_images/ directory with unique filenames. You can then choose how you want to associate these file paths or URLs with the respective order ID in your order’s metadata, as shown in the comments within the code.
This is a basic example. However, when implementing file uploads, it’s crucial that you prioritize security to prevent various forms of attacks and vulnerabilities. So make sure to check stuff like file types, sizes etc: