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);

File form submission by AJAX and PHP

Step 1: First have a look at the HTML form:
<form id="form" id="file-form" name="file_form" method="post" enctype="multipart/form-data">
<input type="file" id="file-input" name="file_input" value="" />
<input type="submit" id="submit-btn" class="submit_btn" name="submit" value="Upload" />
<span class="validation-msg"></span>
</form>

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

Step 2: Then handle this form by JS(jQuery) code:
// Jquery handle submission of file
(function ( $ ) {
  $(document).ready(function(){
    $(".submit_btn").css({'visibility':'hidden'});
    $("#main_submit_btn").click(function(event){
      // event.preventDefault();
      var fd = new FormData();
      var file = $('#file-form').find('input[type="file"]');
      var myFile = file[0].files[0];
     
      if (myFile === undefined) {
$('.validation-msg').text('Please select file!');
      }
      else {
        $('.validation-msg').text('');
// disabled the submit button
        $("#main_submit_btn").prop("disabled", true);
        $('.spinner').css({"visibility":"visible"});
        $.ajax({
  url: process.php, // url to process
  data: fd,
  processData: false,
  contentType: false,
  dataType: 'json',
  type: 'POST',
  success: function (response) {
    // Upload succefull
    processFDH(fd, FDHfile);
  },
  error: function (e) {
    $("#main_submit_btn").prop("disabled", false);
    $('.spinner').css({"visibility":"hidden"});
  }
});
      }
  });
})(jQuery);

Step 3: process.php
if (isset($_FILES)) { 
   //
  if (check_upload_error($uploaded)) {
    echo json_encode("Error uploading file: " . $uploaded->get_error_message());
  }
  else {
    ajax_xml_import($file_content['name'], $location);
    echo json_encode('Import Done!');
  }
}
else {
  echo json_encode('Please upload some files!');

}