wordpress - need to add custom php (to be called by AJAX), but not in a theme - ajax

Question

I have a wordpress application, and in one page, I need to make an AJAX call to some custom PHP file. The custom PHP code will create an image file and save it in a directory. Is it safe to store images in a custom directory at the root?
Where is a good place to place this custom PHP file? Should I place it in a newly created folder at the root? Or will it be deleted if wordpress is updated? Do I need to create a plug-in for this?

Answer 1

It's better if you use a custom directory inside of the uploads folder of the site to store images. Create it and then chmod 775
Place the form in the page template for your page. Add an empty div with a class "upload-response". Just before the closing of the container div, insert a script tag that will echo the admin-ajax.php path to a js variable:
<script>
var ajaxurl = '<?php echo admin_url( 'admin-ajax.php' ); ?>';
</script>
I used jQuery to handle the rest (the contents of the upload.js file):
(function ($) {
$('body').on('click', '.upload-form .btn-upload', function(e){
e.preventDefault();
var imagedata = canvas.toDataURL('image/png');
var fd = new FormData();
//var files_data = imagedata;
fd.append('image', imagedata);
// our AJAX identifier
fd.append('action', 'my_upload_files');
// Remove this code if you do not want to associate your uploads to the current page.
//fd.append('post_id', <?php echo $post->ID; ?>);
$.ajax({
type: 'POST',
url: ajaxurl,
data: fd,
contentType: false,
processData: false,
success: function(response){
$('.upload-response').html(response); // Append Server Response
}
});
});
})(jQuery);
In your plugin file, add:
add_action('wp_enqueue_scripts','ajax_upload_script');
function ajax_upload_script() {
wp_enqueue_script('ajax-upload', plugins_url( '/js/upload.js' ), array('jquery'), '', true);
}
add_action('wp_ajax_my_upload_files', 'my_upload_files');
add_action('wp_ajax_nopriv_my_upload_files', 'my_upload_files'); // Allow front-end submission
function my_upload_files(){
//file handling here
}
Or if you don't want to make a plugin, add the actions to your child theme functions.php and change plugins_url( '/js/upload.js' ) to get_stylesheet_directory_uri().'/js/upload.js'

Answer 2

One way would be to use a plugin like PHP Code for posts. This would be better than hardcoding PHP into templates or WP Pages. The advantage is you can update and change the code easily and when updates are needed to WP, you do not need to re-apply your hardcoded PHP.

Answer 3

If you want implement ajax in wordpress than you need use wp_ajax hook.
https://codex.wordpress.org/Plugin_API/Action_Reference/wp_ajax_(action)
add bellow code in function.php (theme folder)
javascript add in wp_footer hook on function.php
jQuery.post(
ajaxurl,
{
'action': 'add_foobar',
'data': 'foobarid'
},
function(response){
alert('The server responded: ' + response);
}
);
below wp_ajax hook add on function.php
add_action( 'wp_ajax_add_foobar', 'prefix_ajax_add_foobar' );
function prefix_ajax_add_foobar() {
// Handle request then generate response using WP_Ajax_Response
// Don't forget to stop execution afterward.
wp_die();
}
Those code will not update when you update Wordpress. but if possible than add those code on function.php on child theme so in case if you want update theme than not update those code.