Upload Ajax file in Wordpress - cannot pass FormData

Question

I created a script that uses $ .ajax and FormData to pass two form objects in PHP. One form object is text and another is a file. It worked great as a standalone script. However, after I added it to Wordpress as a plugin, it continues to give me "Uncaught TypeError: Illegal invocation" .

I cannot let serialize formdata simply because then I cannot pass the file to the callback function in PHP.

JS using FormData before calling ajax:

 var fd = new FormData(); var file = jQuery(this).find('input[type="file"]'); var caption = jQuery(this).find('input[name=img_caption]'); var individual_file = file[0].files[0]; fd.append("file", individual_file); var individual_capt = caption.val(); fd.append("caption", individual_capt); 

This part above is 100% correct.

Ajax call:

 jQuery.ajax({ type: 'POST', url: fiuajax.ajaxurl, data: { action: 'fiu_upload_file', security: fiuajax.security, data: fd, contentType: false, processData: false, }, success: function(response){ var dataObj = jQuery.parseJSON(response); if(dataObj.message == 'error') { jQuery('.fiu_validation').html('The following error occured: '+dataObj.desc); } else if(dataObj.message == 'success') { jQuery('.fiu_file').val(''); } console.log(response); } }); 

This is incredibly frustrating as it works great outside of Wordpress. I tried to unregister jQuery Wordpress and install the latest version of jQuery, but that didn't make any difference.

Recall:
1) Ajax / jQuery refuses to pass a form object in PHP
2) It is not possible to serialize an object because I need to save the object file
3) the script runs outside of Wordpress
4) I tried updating to the latest version of jQuery, without changes

Answer 1

try the following:

 jQuery(document).on('click', '#submit', function(e){ e.preventDefault(); var fd = new FormData(); var file = jQuery(document).find('input[type="file"]'); var caption = jQuery(this).find('input[name=img_caption]'); var individual_file = file[0].files[0]; fd.append("file", individual_file); var individual_capt = caption.val(); fd.append("caption", individual_capt); fd.append('action', 'fiu_upload_file'); jQuery.ajax({ type: 'POST', url: fiuajax.ajaxurl, data: fd, contentType: false, processData: false, success: function(response){ console.log(response); } }); }); 

Php

 function fiu_upload_file(){ var_dump($_FILES); exit(); } add_action('wp_ajax_fiu_upload_file', 'fiu_upload_file'); add_action('wp_ajax_nopriv_fiu_upload_file', 'fiu_upload_file'); 

Answer 2

I added

  dataType: 'json' 

and it helps. Full list of your Ajax call code:

 jQuery.ajax({ type: 'POST', url: fiuajax.ajaxurl, data: { action: 'fiu_upload_file', security: fiuajax.security, data: fd, dataType: 'json', contentType: false, processData: false, }, success: function(response){ var dataObj = jQuery.parseJSON(response); if(dataObj.message == 'error') { jQuery('.fiu_validation').html('The following error occured: '+dataObj.desc); } else if(dataObj.message == 'success') { jQuery('.fiu_file').val(''); } console.log(response); } }); 

Answer 3

here is some modified code if you have some data and several files

 var fd = new FormData(); var data = jQuery('#yourformID').serializeArray(); jQuery.each(data,function(key,input){ fd.append(input.name,input.value); }); var file = jQuery(document).find('input[type="file"]'); jQuery.each(jQuery(file), function(i, obj) { jQuery.each(obj.files,function(j,file){ fd.append('files[' + j + ']', file); }) }); fd.append('action', 'fiu_upload_file'); 

Answer 4

I have succeeded. The code works with the latest version of Wordpress (4.9.4)

First of all, I use XMLHttpRequest to send data, not jQuery ajax. This means that you can adapt it to pure JS. Pay attention to xhttp.setRequestHeader("enctype","multipart/form-data"); which is required to pass FormData using this method.

JS:

 var user_id = $('#user_id').val(); var picture = $('#userPic')[0].files[0]; console.log(picture); if( picture && typeof picture !== undefined ) { if ( picture['size'] > 1000000 ) { alert('The Profile Pic can\'t be larger than 1Mb.'); return; } if ( picture['type'].indexOf('image') == -1 ) { alert('The uploaded file needs to be an image.'); return; } var data = new FormData(); data.append('user_id', user_id); data.append('userPic', picture); // console.log(data); var xhttp = new XMLHttpRequest(); xhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { console.log('Receive:' + this.responseText); } }; xhttp.open("POST", location.origin + "/wp-content/themes/search-and-go-child/ajax/upload_user_profile_pic_ajax.php", true); xhttp.setRequestHeader("enctype","multipart/form-data"); xhttp.send(data); } 

Part of PHP is also extremely useful, as it requires the files necessary to manage the received data using the basic functions of WP. Here you will also find code to download attachments using the basic WP features.

PHP:

  // error_reporting(-1); // ini_set('display_errors', 'On'); $path = $_SERVER['DOCUMENT_ROOT']; require_once($path.'/wp-load.php'); require_once( '/home/s24t06b21lk5/public_html/wp-includes/template-loader.php' ); // require_once("/home/s24t06b21lk5/public_html/wp-admin" . '/includes/image.php'); require_once("/home/s24t06b21lk5/public_html/wp-admin" . '/includes/file.php'); // require_once("/home/s24t06b21lk5/public_html/wp-admin" . '/includes/media.php'); $user_id = $_POST['user_id']; $picture = $_FILES['userPic']; var_dump($user_id); var_dump($picture); $response = array(); if( isset($picture['name']) && $picture['name'] ) { // Get the path to the upload directory. $wp_upload_dir = wp_upload_dir(); $picture['name'] = preg_replace( '/[^0-9a-zA-Z.]/', '', basename( $picture['name'] ) ); // Upload the file $upload_overrides = array( 'test_form' => false ); $upload_result = wp_handle_upload($picture, $upload_overrides); // echo '<pre>'; print_r($upload_result); echo '</pre>' ; if( $upload_result['url'] ) { // Prepare an array of post data for the attachment. $attachment = array( 'guid' => $upload_result['url'], 'post_mime_type' => $picture['type'], 'post_title' => $picture['name'], 'post_content' => '', 'post_status' => 'inherit' ); $attach_id = wp_insert_attachment( $attachment, $upload_result['file'] ); if( $attach_id ) { // Make sure that this file is included, as wp_generate_attachment_metadata() depends on it. require_once( ABSPATH . 'wp-admin/includes/image.php' ); // Generate the metadata for the attachment, and update the database record. $attach_data = wp_generate_attachment_metadata( $attach_id, $upload_result['file'] ); wp_update_attachment_metadata( $attach_id, $attach_data ); // Update the usermeta table with the uploaded avatar if( !update_user_meta($user_id, 'wp_user_avatar', $attach_id ) || !update_user_meta($user_id, 'wp_zfgrf5v7rw_user_avatar', $attach_id) ) { $response['result'] = FALSE; $response['message'] = "The uploaded image could not be associated with the User ID in the database."; } else { $response['result'] = TRUE; } } else { $response['result'] = FALSE; $response['message'] = "Wordpress attachment post for the user image could not created."; } } else { $response['result'] = FALSE; $response['message'] = "The file couldn't be uploaded. Check the permissions."; } } die( json_encode($response) ); 

Thanks.

Answer 5

Works with any input (one or more simple or multiple) textarea, select in your form (WP 5.0.3)

  $('#form').submit(function(e) { e.preventDefault(); var form = $(this); var formdata = (window.FormData) ? new FormData(form[0]) : null; var data = (formdata !== null) ? formdata : form.serialize(); formdata.append("action", "fiu_upload_file"); $.ajax({ type: 'POST', url: fiuajax.ajaxurl, contentType: false, processData: false, dataType: 'JSON', status: 200, data: formdata, success: function(data){ if(data.error == 'true') { $('.msg').html(data.true); } else { $('.msg').html(data.false); }; } }); }); 

and php only for files

  foreach ($_FILES as $file) : if($file['error'] == UPLOAD_ERR_NO_FILE) : continue; endif; $valid_ext = array( 'jpg' , 'jpeg' , 'png' , 'doc' , 'docx' , 'pdf' , 'xls' , 'xlsx'); $extension_upload = strtolower( substr( strrchr($file['name'], '.') ,1) ); if ( in_array($extension_upload,$valid_ext) ) : $name_upload = uniqid() . $file['name']; $url_insert = trailingslashit( plugin_dir_path( dirname( __FILE__ ) ) ) . 'uploads'; wp_mkdir_p($url_insert); $name_insert = trailingslashit($url_insert) . $name_upload; $action = move_uploaded_file($file['tmp_name'],$name_insert); $msg_true = 'Upload ok '; else : $msg_error = 'Upload error'; endif; endforeach; $result = !isset($msg_error); $msg = array(); if($result) : $msg['error'] = 'true'; $msg['true'] = $msg_true; else : $msg['error'] = 'false'; $msg['false'] = $msg_error; endif; header('Content-Type: application/json'); echo json_encode($msg);