I am stuck since couple of days on the same issues, i hope someone can help with this. I have tried mutiple functions i found on stackoverflow but it seems i am doing something completely wrong!
I need to upload a file to wordpress library with a form submission on the frontend using AJAX.
This is the form:
function shortcode__new_upload_file() { /** * @var WP_User $current_user */ $current_user = $GLOBALS['current_user']; ob_start(); ?> <form id="form-upload" method="POST" enctype="multipart/form-data"> <div class="custom-file"> <input type="file" name="imagefile" class="custom-file-input" id="imageFile"> <label class="custom-file-label" for="imageFile">Choose file</label> </div> <textarea class="form-control" id="imageMessage" name="message"></textarea> <button type="submit" class="btn btn-outline-secondary submit" id="process-upload"><?php _e('Save'); ?></button> <button type="reset" class="btn btn-outline-danger" id="cancel-upload"><?php _e('Cancel'); ?></button> </form> <?php $html = ob_get_clean(); return $html; } // Ads shortcode so you can use the form anywhere you want. add_shortcode( 'new_upload_file', 'shortcode__new_upload_file' );
AJAX call:
jQuery(document).ready(function($){ //$('#process-upload').on('click', function(e){ $("#form-upload").on('submit',function(e){ e.preventDefault(); var el_form = $('#form-upload') //var data = new FormData(); //data.append('action', 'new_upload_file'); //data.append('imageFile', $('input[type=file]')[0].files[0] ); //data.append('message', $('#imageMessage').val() ); // If form is valid run function new_upload_file() // Ajax request. function new_upload_file() { $.ajax({ url: localized_new_upload_file.admin_ajax_url, type: 'POST', //contentType: false, enctype: 'multipart/form-data', //processData: false, //data: data, dataType: 'json', data: { action: 'new_upload_file', // Set action without prefix 'wp_ajax_'. form_data: el_form.serialize() }, cache: false, success: function(response){ console.log(response); window.alert('Done!'); } }); } }); });
function upload_file_callback(){ // get entered form data parse_str( $_POST['form_data'], $form_data ); $postarr = array(); // merge all array and make new array, now get data for each input like following: $form_data[LUBUVNA_PREFIX.'from'] $postarr = array_merge( $postarr, $form_data ); if ( ! function_exists( 'wp_handle_upload' ) ) { require_once( ABSPATH . 'wp-admin/includes/file.php' ); } //$uploadedfile = isset($_FILES['imagefile']) ? $_FILES['imagefile'] : ''; $uploadedfile = $form_data['imagefile']; //$_FILES['imagefile']; $upload_overrides = array( 'test_form' => false ); $movefile = wp_handle_upload( $uploadedfile, $upload_overrides ); if ( $movefile && !isset( $movefile['error'] ) ) { $feedback = "File is valid, and was successfully uploaded.n"; var_dump( $movefile); } else { /** * Error generated by _wp_handle_upload() * @see _wp_handle_upload() in wp-admin/includes/file.php */ $feedback = print_r($movefile, true); } // send email with details $headers = [ 'MIME-Version: 1.0', 'From: myemailfrom@hotmail.com', 'Content-Type: text/html; charset=UTF-8' ]; $headers = implode("rn", $headers); wp_mail('myemailto@gmail.com','Script Ran','<br>FEEDBACK:<br>'.$feedback. '<br>FORM Array:<br>' . print_r($postarr, true) ,$headers); } //add_action('wp_ajax_nopriv_new_upload_file', 'upload_file_callback'); add_action( 'wp_ajax_new_upload_file', 'upload_file_callback' );
So the form data is showing up in the email like following after form submission:
FEEDBACK: Array ( [error] => Specified file failed upload test. ) NASH TEXT: FORM Array: :Array ( [message] => car )
I am not getting the data of the imagefile
field. and that’s why i guess i am getting an error Specified file failed upload test.
Whats wrong with my function.. i have by the way tried $_FILES / $_POST but there is something i am missing.
EDIT JS File
jQuery(document).ready(function($) { //$("#form-upload").submit(function(e){ $("#form-upload").on('submit',function(e){ e.preventDefault(); var $this = $(this); var formData = new FormData( $this[0] ); formData.append('action', 'new_upload_file'); //formData.append('_nonce', $('input[name*="my_token"]') ).val(); //formData.append('_nonce', $this.closest('form').find('.nonce').val(); formData.append('_nonce', $(this).find('input[name*="my_token"]').val() ); // Ajax request. $.ajax({ url: localized_new_upload_file.admin_ajax_url, type: 'POST', data: { 'form_data' : formData }, contentType: false, //enctype: 'multipart/form-data', cache: false, processData: false, success: function(response){ console.log(response); window.alert('Done!'); } }); return false; }); });
FORM
<form id="form-upload" method="POST" enctype="multipart/form-data"> <div class="custom-file"> <!--<input type="file" name="imagefile" class="custom-file-input" id="imageFile" accept="image/*">--> <input type="file" name="imagefile" class="custom-file-input" id="imageFile"> <label class="custom-file-label" for="imageFile">Choose file</label> <!--<input name="my_token" class="nonce" value="<?php //echo wp_create_nonce("my_token"); ?>" type="hidden">--> <?php wp_nonce_field( SECURE_AUTH_SALT, 'my_token' ) ?> </div> <textarea class="form-control" id="imageMessage" name="message"></textarea> <button type="submit" class="btn btn-outline-secondary submit" id="process-upload"><?php _e('Save'); ?></button> <button type="reset" class="btn btn-outline-danger" id="cancel-upload"><?php _e('Cancel'); ?></button> </form>
PHP
function script__new_upload_file() { wp_enqueue_media(); wp_enqueue_script( 'new_upload_file', get_stylesheet_directory_uri(). '/ajax-file-upload.js', array( 'jquery' ), '1.0.0', true ); wp_localize_script( 'new_upload_file', 'localized_new_upload_file', array( 'admin_ajax_url' => admin_url( 'admin-ajax.php' ), //'security' => wp_create_nonce( 'my-special-string' ) )); } // Use wp_enqueue_scripts action hook so you can correctly localize the script with admin ajax URL. add_action( 'wp_enqueue_scripts', 'script__new_upload_file' ); function upload_file_callback(){ // get entered form data parse_str( $_POST['form_data'], $form_data ); $postarr = array(); // merge all array and make new array, now get data for each input like following: $form_data[LUBUVNA_PREFIX.'from'] $postarr = array_merge( $postarr, $form_data ); if ( ! function_exists( 'wp_handle_upload' ) ) { require_once( ABSPATH . 'wp-admin/includes/file.php' ); } //$uploadedfile = isset($_FILES['imagefile']) ? $_FILES['imagefile'] : ''; $uploadedfile = $form_data['imagefile']; //$_FILES['imagefile']; //print_r($uploadedfile); // die(); $upload_overrides = array( 'test_form' => false ); $movefile = wp_handle_upload( $uploadedfile, $upload_overrides ); if ( $movefile && !isset( $movefile['error'] ) ) { $feedback = "File is valid, and was successfully uploaded.n"; var_dump( $movefile); } else { /** * Error generated by _wp_handle_upload() * @see _wp_handle_upload() in wp-admin/includes/file.php */ $feedback = print_r($movefile, true); } // send email with details $headers = [ 'MIME-Version: 1.0', 'From: myemailfrom@hotmail.com', 'Content-Type: text/html; charset=UTF-8' ]; $headers = implode("rn", $headers); wp_mail('myemailto@gmail.com','Script Ran','<br>FEEDBACK:<br>'.$feedback. '<br>FORM Array:<br>' . print_r($postarr, true) ,$headers); } add_action('wp_ajax_nopriv_new_upload_file', 'upload_file_callback'); add_action( 'wp_ajax_new_upload_file', 'upload_file_callback' );
Advertisement
Answer
When using the FormData object in $.ajax, you pass it directly as the data field
jQuery(document).ready(function($) { //$("#form-upload").submit(function(e){ $("#form-upload").on('submit',function(e){ e.preventDefault(); var formData = new FormData( this ); formData.append('action', 'new_upload_file'); //formData.append('_nonce', $('input[name*="my_token"]') ).val(); //formData.append('_nonce', $this.closest('form').find('.nonce').val(); formData.append('_nonce', $(this).find('input[name*="my_token"]').val() ); // Ajax request. $.ajax({ url: localized_new_upload_file.admin_ajax_url, type: 'POST', data: formData, //<----- Pass the formdata object only contentType: false, cache: false, processData: false, success: function(response){ console.log(response); window.alert('Done!'); } }); return false; }); });
In PHP
$_FILES['imagefile']
will give you access to the file
$_POST['message']
will give you access to the textarea text
$_POST['_nonce']
will give you access to the nonce
$_POST['action']
will give you access to the action