😆[Upload Image Form] How to Integrate Ajax File Upload in WordPress 😒 use change P 1 (ok)

https://artisansweb.net/ajax-file-upload-in-wordpress/

Ví dụ 1: Inserts an attachment to a parent with a post ID of 37:

function media_selector_settings_page_callback()
{
  //  just for simplicity saving the data right here, but in practice you wouldn't want that.
  $id = get_current_user_id();
  update_option('media_ids', 11845);
  wp_enqueue_media();
  // $media_ids_raw = get_option('media_ids');
  // $media_ids = explode(',', $media_ids_raw);
  $html = '';
  $html .= '<div class="form-group form-group-upload" style=" display: flex; align-items: center; ">';
    $html .= '<form class="fileUpload" enctype="multipart/form-data">';
      // $html .= '<div id="upload_image_button">Upload your ID</div>';
      $html .= '<div class="form-group">';
        $html .= '<label id="upload_image_button">Upload your ID:</label>';
        $html .= '<input type="file" id="filett" accept="image/*">';
      $html .= '</div>';
      // $html .= '<input type="hidden" name="media_ids" id="image_attachment_id" value="' . $media_ids_raw . '">';
    $html .= '</form>';
  // if(current_user_can('administrator') && get_current_user_id()) :
  // $html .= '<div class="image-preview-wrapper">';
  // $html .= '<div id="image-preview">';
  // if (count($media_ids) > 0) :
  //   foreach ($media_ids as $i) :
  //     $html .= '<img src="' . wp_get_attachment_thumb_url($i) . '">';
  //   endforeach;
  // endif;
  // $html .= '</div>';
  // $html .= '</div>';
  // endif;
  $html .= '</div>';
  return $html;
}
add_shortcode("upload_your_id", "media_selector_settings_page_callback");
add_action('wp_ajax_file_upload', 'file_upload_callback');
add_action('wp_ajax_nopriv_file_upload', 'file_upload_callback');
function file_upload_callback()
{
  check_ajax_referer('file_upload', 'security');
  $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
  if (in_array($_FILES['file']['type'], $arr_img_ext)) {
    $upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
    if ($upload['url']) {
      // $filename should be the path to a file in the upload directory.
      $url_to_array = parse_url($upload['url']);
      $filename = str_replace("/media/upload/", "", $url_to_array['path']);
      $wp_upload_dir = wp_upload_dir();
      // The ID of the post this attachment is for.
      $parent_post_id = 638;
      // Check the type of file. We'll use this as the 'post_mime_type'.
      $filetype = wp_check_filetype(basename($filename), null);
      // Get the path to the upload directory.
      // Prepare an array of post data for the attachment.
      $attachment = array(
        'guid'           => basename($filename),
        'post_mime_type' => $filetype['type'],
        'post_title'     => preg_replace('/\.[^.]+$/', '', basename($filename)),
        'post_content'   => '',
        'post_status'    => 'inherit'
      );
      // Insert the attachment.
      $attach_id = wp_insert_attachment($attachment, $filename, $parent_post_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, $filename);
      wp_update_attachment_metadata($attach_id, $attach_data);
      set_post_thumbnail($parent_post_id, $attach_id);
      $return = array(
        'message'  => 'saved'
      );
      wp_send_json($return);
    }
  }
  wp_die();
}

Ví dụ 2:

C:\xampp\htdocs\style2\wp-content\themes\gutener\test.php

<?php 
    /* Template Name: Example Template */ 
?>
<?php  
  get_header();
?>
<form class="fileUpload" enctype="multipart/form-data">
    <div class="form-group">
        <label>Choose File:</label>
        <input type="file" id="filett" accept="image/*" />
    </div>
</form>
<?php  
  get_footer();
?>

C:\xampp\htdocs\style2\wp-content\themes\gutener\functions.php

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'file_upload' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts', 'blog_scripts');
add_action('wp_ajax_file_upload', 'file_upload_callback');
add_action('wp_ajax_nopriv_file_upload', 'file_upload_callback');
function file_upload_callback() {
  check_ajax_referer('file_upload', 'security');
  $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
  if (in_array($_FILES['file']['type'], $arr_img_ext)) {
    $upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
    echo $upload['url'];
    //$upload['url'] will gives you uploaded file path
  }
  wp_die();
}

C:\xampp\htdocs\style2\wp-content\themes\gutener\js\custom.js

jQuery(function($) {
  $('body').on('change', '#filett', function() {
    $this = $(this);
    file_data = $(this).prop('files')[0];
    form_data = new FormData();
    form_data.append('file', file_data);
    form_data.append('action', 'file_upload');
    form_data.append('security', blog.security);
    $.ajax({
      url: blog.ajaxurl,
      type: 'POST',
      contentType: false,
      processData: false,
      data: form_data,
      success: function(response) {
        $this.val('');
        alert('File uploaded successfully.');
      }
    });
  });
});

Do you want to integrate Ajax file upload in WordPress? Sometimes, you need to perform a task which uploads a file through Ajax. In this article, we study how to upload files with jQuery and Ajax in WordPress. I’ll cover uploading both single and multiple files.

The most obvious reason for using this technique is uploading files through Ajax reduces loads on the server. This process does not require reloading the whole page which saves extra calls to a server. Eventually, it saves the server bandwidth. This approach also gives a better user experience on your WordPress website.

Create a HTML

For getting started, you need a form with the file input. We will give an Ajax call once the user chooses a file on the client-side. This file’s content will be sent to the server. On the server side, we collect the content of a file and store its copy under the wp-content/uploads directory. To create a file with given content in the uploads folder, I’ll use the wp_upload_bits method.

Add the below HTML to your page template or anywhere you want.

<form class="fileUpload" enctype="multipart/form-data">
    <div class="form-group">
        <label>Choose File:</label>
        <input type="file" id="file" accept="image/*" />
    </div>
</form>

I have given the “file” id to execute change events on the file input. The attribute accept=”image/*” will show only images in the file explorer.

Include JS File in WordPress Environment

To send the file on the server-side, it is required to write JavaScript code. For this, I am going to create a custom.js into the theme directory and include it in the WordPress environment. This file will have the JavaScript code to handle

Change event on file input
Collect the files content
Call the Ajax and post files data to the server

The below code will go inside the functions.php file. After adding this, you will see custom.js automatically included on the front end.

function blog_scripts() {
    // Register the script
    wp_register_script( 'custom-script', get_stylesheet_directory_uri(). '/js/custom.js', array('jquery'), false, true );
  
    // Localize the script with new data
    $script_data_array = array(
        'ajaxurl' => admin_url( 'admin-ajax.php' ),
        'security' => wp_create_nonce( 'file_upload' ),
    );
    wp_localize_script( 'custom-script', 'blog', $script_data_array );
  
    // Enqueued script with localized data.
    wp_enqueue_script( 'custom-script' );
}
add_action('wp_enqueue_scripts', 'blog_scripts');

Look at the above code and you will notice 2 elements passed to the custom.js file.

ajaxurl : In WordPress, all Ajax requests execute through admin-ajax.php URL. We will call this URL in JavaScript.
security : With this variable I am passing a WordPress nonce to avoid CSRF attacks.

Write a JavaScript to Upload a File

We are ready with the HTML form and JS file. Now, we have to catch the change event, build the file object with files content and give an Ajax call. Add the following code to the custom.js file.

jQuery(function($) {
    $('body').on('change', '#file', function() {
        $this = $(this);
        file_data = $(this).prop('files')[0];
        form_data = new FormData();
        form_data.append('file', file_data);
        form_data.append('action', 'file_upload');
        form_data.append('security', blog.security);
  
        $.ajax({
            url: blog.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                $this.val('');
                alert('File uploaded successfully.');
            }
        });
    });
});

Here, I am appending the file’s content, action, and security arguments to the file object. We proceed with this file content at the server-side to create a file out of it. The values of action and security will be handled in the next step.

Upload File on Server

The value of the action argument is used to call the server-side PHP function. We need to pass this value to the WordPress actions as follows.

add_action('wp_ajax_file_upload', 'file_upload_callback');
add_action('wp_ajax_nopriv_file_upload', 'file_upload_callback');

You should add the above code in the functions.php file. To the ‘wp_ajax_’ and ‘wp_ajax_nopriv_’, I appended the action’s value which is ‘file_upload’. The second parameter ‘file_upload_callback’ is the callback method that will have actual code for server-side file uploading. The ‘wp_ajax_{action}’ fires Ajax action.

Note: You don’t need to write the ‘wp_ajax_nopriv_’ action if you are adding this functionality on the backend. This action is required only for front-end users.

function file_upload_callback() {
    check_ajax_referer('file_upload', 'security');
    $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
    if (in_array($_FILES['file']['type'], $arr_img_ext)) {
        $upload = wp_upload_bits($_FILES["file"]["name"], null, file_get_contents($_FILES["file"]["tmp_name"]));
        //$upload['url'] will gives you uploaded file path
    }
    wp_die();
}

The very first statement checks for security nonce and executes a code only if the nonce is valid.

Go ahead and give it a try. Your file should be uploaded to the wp-content/uploads/ folder. You will find your file in the current month folder of the uploads directory.

Upload Multiple Files

Similar to a single file you would like to upload multiple files through Ajax. With a few changes in the previous code, you can achieve it.

First, add a ‘multiple’ attribute to the file input. This allows a user to select multiple files on file explorer.

<form class="fileUpload" enctype="multipart/form-data">
    <div class="form-group">
        <label>Choose File:</label>
        <input type="file" id="file" accept="image/*" multiple />
    </div>
</form>

On the JavaScript end, we have to pick up multiple files, loop through them, and build a final file object.

custom.js

jQuery(function($) {    
    $('body').on('change', '#file', function() {
        $this = $(this);
        file_obj = $this.prop('files');
        form_data = new FormData();
        for(i=0; i<file_obj.length; i++) {
            form_data.append('file[]', file_obj[i]);
        }
        form_data.append('action', 'file_upload');
        form_data.append('security', blog.security);
  
        $.ajax({
            url: blog.ajaxurl,
            type: 'POST',
            contentType: false,
            processData: false,
            data: form_data,
            success: function (response) {
                $this.val('');
                alert('File(s) uploaded successfully.');
            }
        });
    });
});

Finally, in the Ajax callback function, loop through the file array and upload each file on a server.

function file_upload_callback() {
    check_ajax_referer('file_upload', 'security');
    $arr_img_ext = array('image/png', 'image/jpeg', 'image/jpg', 'image/gif');
    for($i = 0; $i < count($_FILES['file']['name']); $i++) {
        if (in_array($_FILES['file']['type'][$i], $arr_img_ext)) {
            $upload = wp_upload_bits($_FILES['file']['name'][$i], null, file_get_contents($_FILES['file']['tmp_name'][$i]));
            //$upload['url'] will gives you uploaded file path
        }
    }
    wp_die();
}

I hope you understand the Ajax file upload in WordPress. This tutorial mainly focuses on uploading images. However, by removing references to images, you can upload any other file formats through this code.

PreviousHow to Set Featured Image Programmatically post, product in WordPress (ok)Next[Upload Image Form] How to Integrate Ajax File Upload in WordPress 😒 use submit P2 (ok)

Last updated 1 year ago