So I have been reading through every WordPress front-end AJAX file upload tutorial I can fine. Nothing is working for me at the moment. The one that makes the most sense to me is this one: /
Here is my code:
In my template file example.php
<script>var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>"</script>
<form id="file_form">
<?php wp_nonce_field('ajax_file_nonce', 'security'); ?>
<input type="hidden" name="action" value="my_file_upload">
<label for="file_upload">It's a file upload...</label>
<input type="file" name="file_upload">
<input type="submit" value="Go">
</form>
This is in ajax-file-upload.js
jQuery(document).ready(function(){
var form_data = {};
$(this).find('input').each(function(){
form_data[this.name] = $(this).val();
});
$('#file_form').ajaxForm({
url: ajax_url, // there on the admin side, do-it-yourself on the front-end
data: form_data,
type: 'POST',
contentType: 'json',
success: function(response){
alert(response.message);
}
});
});
This is in my functions.php
function q_scripts(){
$src = get_template_directory_uri().'/js/ajax-file-upload.js';
wp_enqueue_script('my_ajax_file_uploader_thing', $src, array('jquery', 'jquery-form'));
}
add_action('init', 'q_scripts');
function handle_file_upload(){
check_ajax_referer('ajax_file_nonce', 'security');
if(!(is_array($_POST) && is_array($_FILES) && defined('DOING_AJAX') && DOING_AJAX)){
return;
}
if(!function_exists('wp_handle_upload')){
require_once(ABSPATH . 'wp-admin/includes/file.php');
}
$upload_overrides = array('test_form' => false);
$response = array();
foreach($_FILES as $file){
$file_info = wp_handle_upload($file, $upload_overrides);
// do something with the file info...
$response['message'] = 'Done!';
}
echo json_encode($response);
die();
}
add_action('wp_ajax_my_file_upload', 'handle_file_upload');
I have tried adding the enctype to the form element and this didn't work. The error I keep getting is an alert saying 'undefined'. Does anyone know how I can correct this issue?
EDIT
The 'undefined' issue has now gone away as I editied the js file to have a click event and changed the selector for the form input loop:
jQuery(document).ready(function($){
$('#file_form :submit').click(function() {
var form_data = {};
$('#file_form').find('input').each(function () {
form_data[this.name] = $(this).val();
});
console.log(form_data);
$('#file_form').ajaxForm({
url: ajax_url, // there on the admin side, do-it-yourself on the front-end
data: form_data,
type: 'POST',
contentType: 'json',
success: function (response) {
alert(response.message);
},
error: function (response) {
console.log('error');
}
});
return false;
});
});
The files still aren't being uploaded to the media folder. I also want to get the uploaded URL back once it has uploaded.
I am writing to the console the file object so I can see what is happening. Here is an example of it:
Object {security: "e6db2a6eee", _wp_http_referer: "/chat?sessionappid=138", action: "my_file_upload", file_upload: "C:\fakepath\download.jpg", "": "Go"}
Is there something wrong with this and is that why it isn't uploading?
So I have been reading through every WordPress front-end AJAX file upload tutorial I can fine. Nothing is working for me at the moment. The one that makes the most sense to me is this one: http://theaveragedev/wordpress-files-ajax/
Here is my code:
In my template file example.php
<script>var ajax_url = "<?php echo admin_url('admin-ajax.php'); ?>"</script>
<form id="file_form">
<?php wp_nonce_field('ajax_file_nonce', 'security'); ?>
<input type="hidden" name="action" value="my_file_upload">
<label for="file_upload">It's a file upload...</label>
<input type="file" name="file_upload">
<input type="submit" value="Go">
</form>
This is in ajax-file-upload.js
jQuery(document).ready(function(){
var form_data = {};
$(this).find('input').each(function(){
form_data[this.name] = $(this).val();
});
$('#file_form').ajaxForm({
url: ajax_url, // there on the admin side, do-it-yourself on the front-end
data: form_data,
type: 'POST',
contentType: 'json',
success: function(response){
alert(response.message);
}
});
});
This is in my functions.php
function q_scripts(){
$src = get_template_directory_uri().'/js/ajax-file-upload.js';
wp_enqueue_script('my_ajax_file_uploader_thing', $src, array('jquery', 'jquery-form'));
}
add_action('init', 'q_scripts');
function handle_file_upload(){
check_ajax_referer('ajax_file_nonce', 'security');
if(!(is_array($_POST) && is_array($_FILES) && defined('DOING_AJAX') && DOING_AJAX)){
return;
}
if(!function_exists('wp_handle_upload')){
require_once(ABSPATH . 'wp-admin/includes/file.php');
}
$upload_overrides = array('test_form' => false);
$response = array();
foreach($_FILES as $file){
$file_info = wp_handle_upload($file, $upload_overrides);
// do something with the file info...
$response['message'] = 'Done!';
}
echo json_encode($response);
die();
}
add_action('wp_ajax_my_file_upload', 'handle_file_upload');
I have tried adding the enctype to the form element and this didn't work. The error I keep getting is an alert saying 'undefined'. Does anyone know how I can correct this issue?
EDIT
The 'undefined' issue has now gone away as I editied the js file to have a click event and changed the selector for the form input loop:
jQuery(document).ready(function($){
$('#file_form :submit').click(function() {
var form_data = {};
$('#file_form').find('input').each(function () {
form_data[this.name] = $(this).val();
});
console.log(form_data);
$('#file_form').ajaxForm({
url: ajax_url, // there on the admin side, do-it-yourself on the front-end
data: form_data,
type: 'POST',
contentType: 'json',
success: function (response) {
alert(response.message);
},
error: function (response) {
console.log('error');
}
});
return false;
});
});
The files still aren't being uploaded to the media folder. I also want to get the uploaded URL back once it has uploaded.
I am writing to the console the file object so I can see what is happening. Here is an example of it:
Object {security: "e6db2a6eee", _wp_http_referer: "/chat?sessionappid=138", action: "my_file_upload", file_upload: "C:\fakepath\download.jpg", "": "Go"}
Is there something wrong with this and is that why it isn't uploading?
Share Improve this question edited Aug 16, 2015 at 17:44 hootsmctoots84 asked Aug 16, 2015 at 17:25 hootsmctoots84hootsmctoots84 2111 gold badge2 silver badges5 bronze badges 2- You're missing the action parameter in your js. codex.wordpress/AJAX_in_Plugins – shanebp Commented Aug 16, 2015 at 18:22
- Hi Shane (aren't you BuddyPress Shane?). The action parameter is passed as a hidden field in the form. I've decided to use a different solution. I'm using Simple Ajax Upload to upload the files to a different directory. – hootsmctoots84 Commented Aug 16, 2015 at 19:54
3 Answers
Reset to default 13Hi You have Use this COde For WordPress front-end AJAX file upload tutorial Code Here is my code:
In my template file example.php
<form enctype="multipart/form-data">
<input type="text" name="support_title" class="support-title">
<input type="file" id="sortpicture" name="upload">
<input class="save-support" name="save_support" type="button" value="Save">
</form>
This is in ajax-file-upload.js
jQuery(document).on('click', '.save-support', function (e) {
var supporttitle = jQuery('.support-title').val();
var querytype = jQuery('.support-query').val();
var file_data = jQuery('#sortpicture').prop('files')[0];
var form_data = new FormData();
if (supporttitle == '') {
jQuery('.support-title').css({"border": "1px solid red"})
return false;
} else {
jQuery('.support-title').css({"border": "1px solid #e3ecf0"})
}
form_data.append('file', file_data);
form_data.append('action', 'md_support_save');
form_data.append('supporttitle', supporttitle);
jQuery.ajax({
url: '<?php echo admin_url('admin-ajax.php'); ?>',
type: 'post',
contentType: false,
processData: false,
data: form_data,
success: function (response) {
jQuery('.Success-div').html("Form Submit Successfully")
},
error: function (response) {
console.log('error');
}
});
});
});
This iS functions.php code
add_action( 'wp_ajax_md_support_save','md_support_save' );
add_action( 'wp_ajax_nopriv_md_support_save','md_support_save' );
function md_support_save(){
$support_title = !empty($_POST['supporttitle']) ?
$_POST['supporttitle'] : 'Support Title';
if (!function_exists('wp_handle_upload')) {
require_once(ABSPATH . 'wp-admin/includes/file.php');
}
// echo $_FILES["upload"]["name"];
$uploadedfile = $_FILES['file'];
$upload_overrides = array('test_form' => false);
$movefile = wp_handle_upload($uploadedfile, $upload_overrides);
// echo $movefile['url'];
if ($movefile && !isset($movefile['error'])) {
echo "File Upload Successfully";
} else {
/**
* Error generated by _wp_handle_upload()
* @see _wp_handle_upload() in wp-admin/includes/file.php
*/
echo $movefile['error'];
}
die();
}
HTML
<form id="article_form" name="article_form" class="wordpress-ajax-form" method="post" action="<?php echo admin_url('admin-ajax.php'); ?>" enctype="multipart/form-data" >
<input type="file" name="uploadedfiles" id="uploadedfiles" accept="image/*" >
<br>
<input type="hidden" name="action" value="custom_action">
<br>
<button>Send</button>
</form>
JS
$(".wordpress-ajax-form").submit(function(evt){
evt.preventDefault();
var formData = new FormData($(this)[0]);
$.ajax({
url: $('#article_form').attr('action'),
type: 'POST',
data: formData,
async: true,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
success: function (response) {
// alert(response);
alert('Article created Successfully!!!');
}
});
return false;
});
all codes for function.php
if (!empty($_POST) || (!empty($_FILES))) {
require_once (ABSPATH . '/wp-admin/includes/file.php');
require_once (ABSPATH . '/wp-admin/includes/image.php');
global $wpdb;
if (isset($_POST['submit'])) {
// Upload Exhibitor Logo
$file = $_FILES['uploaded_doc'];
if (!empty($file)) {
$uploads = wp_upload_dir();
// Create 'user_avatar' directory if not exist
$folderPath = ABSPATH . 'wp-content/uploads/Reports';
if (!file_exists($folderPath)) {
mkdir($folderPath, 0777, true);
}
$ext = end((explode(".", $_FILES['uploaded_doc']['name'])));
if( $ext== 'pdf' || $ext== 'docx' ){
$ABSPATH_userAvatarFullImage = ABSPATH . 'wp-content/uploads/Reports/' . time() . '.' . $ext;
if (move_uploaded_file($_FILES['uploaded_doc']['tmp_name'], $ABSPATH_userAvatarFullImage)) {
$data = array(
'title' => $_POST['title'],
'arabic_title' => $_POST['arabic_title'],
'principle_investigators' => $_POST['principle_investigators'],
'co_investgators' => $_POST['co_investgators'],
'coverage_area' => $_POST['coverage_area'],
'publication_year' => $_POST['publication_year'],
'types' => $_POST['types'],
'uploaded_doc' => $_FILES['uploaded_doc']['name'],
'create_date'=> date('Y-m-d H:i:s')
);
$table = $wpdb->prefix . "reports_publication";
$result = $wpdb->insert($table, $data);
}
echo "1";
}else{
echo "File not in format";
}
}
}
}
}