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