Monday, September 24, 2018

File form submission by AJAX in custom plugin wordpress

Form (upload-admin.php):
<form id="form-id" name="form-name" method="post" enctype="multipart/form-data">
      <input type="file" id="file-id" name="file-name">
      <input type="submit" id="submit-btn" class="submit_btn" name="submit" value="Upload" />
      <input type="hidden" name="action" value="process_data" />
      <span class="validation-msg"></span>
</form>

<button id="main_submit_btn">Submit</button>

In main starting file add menu hook to call the html form:
function custom_admin() {
  include('upload-admin.php');
}

function now_menu() {
  add_management_page("My Title", "My Title", 1, "now-upload", "custom_admin");

}

function add_file_uploading_js() {
  wp_enqueue_script('my_custom_script', plugin_dir_url( __FILE__ ) . 'js/file_uploader.js', array('jquery'), false, true);
  // Localize the script with new data
  $data = array(
    'ajaxurl' => admin_url('admin-ajax.php')
  );
  wp_localize_script('my_custom_script', 'url_data', $data);
}

function process_data()
{
  global $wpdb, $channels;

  if (isset($_FILES)) {
      $uploaded = media_handle_upload($file, 0);
      $location = (get_attached_file($uploaded));
      if (is_wp_error($uploaded)) {
        wp_send_json_error("Error uploading file: " . $uploaded->get_error_message());
      }
      else {
        wp_send_json_success('Import Done!');
      }
  } else {
    wp_send_json_error('Please upload some files!');
  }
}

add_action('admin_menu', 'now_menu');
add_action('admin_enqueue_scripts', 'add_file_uploading_js');
add_action('wp_ajax_process_data', 'process_data');

file_uploader.js
// Jquery handle submission file form
(function ( $ ) {
$(document).ready(function(){
$(".submit_btn").css({'visibility':'hidden'});
var fileUploadParserUrl = url_data.file_upload_parser_url;

$("#main_submit_btn").click(function(event){
        // event.preventDefault();
        var fd = new FormData();
    var file = $('#FDH-form').find('input[type="file"]');
    var FDHfile = file[0].files[0];
    if (FDHfile === undefined) {
    $('.validation-msg').text('Please select all files! You might have missed one or more of xml file to select!');
    }
    else {
    $('.validation-msg').text('');
                        fd.append('file', FDHfile);
fd.append('action', 'process_data');
// disabled the submit button
        $("#main_submit_btn").prop("disabled", true);
        $('.spinner').css({"visibility":"visible"});
        // First clear xml_data table
        $.ajax({
            url: url_data.ajaxurl,
        data: fd,
        processData: false,
        contentType: false,
        dataType: 'json',
        type: 'POST',
            success: function (response) {
            $('.validation-msg-STH').text('STH_web_guide.xml Import Done!');
                // FINISH uploading and importing for ALL
            $("#main_submit_btn").prop("disabled", false);
                $('.spinner').css({"visibility":"hidden"});
            },
            error: function (e) {
                $("#main_submit_btn").prop("disabled", false);
                $('.spinner').css({"visibility":"hidden"});
            }
        });
    }
});
})(jQuery);

No comments:

Post a Comment

Suomen kieli (Imperfekti)

In Finnish, the imperfekti is the past tense that describes actions that happened in the past, like the English simple past (e.g., "I ...