From 65f35acdf2e333471f79f12a80ea2b050b7809af Mon Sep 17 00:00:00 2001 From: "Soare Robert Daniel (Mac 2023)" Date: Wed, 4 Sep 2024 16:58:19 +0300 Subject: [PATCH] fix: delete non-img file btn and workflow --- inc/files.php | 23 ++++++---- js/file-upload.js | 113 ++++++++++++++++++++++++++++++++-------------- 2 files changed, 94 insertions(+), 42 deletions(-) diff --git a/inc/files.php b/inc/files.php index 484559ba..db7a67ab 100644 --- a/inc/files.php +++ b/inc/files.php @@ -345,17 +345,20 @@ function ppom_upload_file() { // Deleting file function ppom_delete_file() { - $file_name = sanitize_file_name( $_REQUEST ['file_name'] ); + if ( ! isset( $_REQUEST ['file_name'] ) || ! isset( $_REQUEST['ppom_nonce'] ) ) { + echo __( 'Missing data.', 'woocommerce-product-addon' ); + die( 0 ); + } - $ppom_nonce = $_REQUEST['ppom_nonce']; + $file_name = sanitize_file_name( $_REQUEST ['file_name'] ); + $ppom_nonce = sanitize_key( $_REQUEST['ppom_nonce'] ); $file_nonce_action = 'ppom_deleting_file_action'; if ( ! wp_verify_nonce( $ppom_nonce, $file_nonce_action ) ) { - printf( __( 'Error while deleting file %s', 'woocommerce-product-addon' ), $file_name ); + printf( __( 'Verification failed for file: %s', 'woocommerce-product-addon' ), $file_name ); die( 0 ); } - $dir_path = ppom_get_dir_path(); - + $dir_path = ppom_get_dir_path(); $file_path = $dir_path . $file_name; if ( file_exists( $file_path ) && unlink( $file_path ) ) { @@ -379,7 +382,7 @@ function ppom_delete_file() { printf( __( 'Error while deleting file %s', 'woocommerce-product-addon' ), $file_path ); } } else { - printf( __( 'Error while deleting file %s', 'woocommerce-product-addon' ), $file_path ); + printf( __( 'The file %s does not exists.', 'woocommerce-product-addon' ), $file_path ); } die( 0 ); @@ -477,7 +480,7 @@ function ppom_uploaded_file_preview( $file_name, $settings ) { // Tools group $file_tools .= '
'; // $file_tools .= ''; - $file_tools .= '' . __( 'Delete', 'woocommerce-product-addon' ) . ''; + $file_tools .= ''; if ( apply_filters( 'ppom_show_image_popup', false ) ) { $file_tools .= ''; @@ -491,8 +494,10 @@ function ppom_uploaded_file_preview( $file_name, $settings ) { $file_meta .= __( 'Size: ', 'woocommerce-product-addon' ) . ppom_get_filesize_in_kb( $file_name ); $thumb_url = PPOM_URL . '/images/file.png'; - $file_tools .= ''; // delete icon - // $file_tools .= 'Delete'; //delete icon + // Tools group + $file_tools .= '
'; + $file_tools .= ''; + $file_tools .= '
'; } diff --git a/js/file-upload.js b/js/file-upload.js index ca61b54d..cab37a0d 100644 --- a/js/file-upload.js +++ b/js/file-upload.js @@ -90,53 +90,100 @@ jQuery(function($) { }); // Deleting File - $(".ppom-wrapper").on('click', '.u_i_c_tools_del', function(e) { + document.querySelector('.ppom-wrapper')?.addEventListener('click', async function(e) { + if ( + ! e.target.classList.contains('u_i_c_tools_del') || + ! plupload_instances + ) { + return; + } + e.preventDefault(); - var del_message = ppom_file_vars.delete_file_msg; - var a = confirm(del_message); - if (a) { - // it is removing from uploader instance - var fileid = $(this).closest('.ppom-file-wrapper').attr("data-fileid"); - var file_data_name = $(this).closest('div.ppom-field-wrapper').attr("data-data_name"); - // console.log(fileid); - field_file_count[file_data_name] = 0; + const delMessage = ppom_file_vars.delete_file_msg; + if ( ! confirm( delMessage ) ) return; + + const ppomFileWrapper = e.target.closest('.ppom-file-wrapper'); + const fileId = ppomFileWrapper?.getAttribute("data-fileid"); + const ppomFieldWrapper = e.target.closest('div.ppom-field-wrapper'); + const fileDataName = ppomFieldWrapper?.getAttribute("data-data_name"); - plupload_instances[file_data_name].removeFile(fileid); + if ( !fileId || !fileDataName ) return; - var filename = $('input:checkbox[name="ppom[fields][' + file_data_name + '][' + fileid + '][org]"]').val(); + field_file_count[fileDataName] = 0; - // it is removing physically if uploaded - $("#u_i_c_" + fileid).find('img').attr('src', ppom_file_vars.plugin_url + '/images/loading.gif'); + const uploaderInstance = plupload_instances[fileDataName]; + if ( uploaderInstance ) { + uploaderInstance.removeFile(fileId); + } - // console.log('filename ppom[fields][['+fileid+']'); - var data = { action: 'ppom_delete_file', file_name: filename, 'ppom_nonce': ppom_file_vars.ppom_file_delete_nonce }; + const checkbox = document.querySelector(`input[name="ppom[fields][${fileDataName}][${fileId}][org]"]`); + const fileName = checkbox?.value; - $.post(ppom_file_vars.ajaxurl, data, function(resp) { - alert(resp); - $("#u_i_c_" + fileid).hide(500).remove(); + if ( ! fileName ) return; - // it is removing for input Holder - $('input:checkbox[name="ppom[fields][' + file_data_name + '][' + fileid + '][org]"]').remove(); + // Delete animation. + const imageElement = document.querySelector(`#u_i_c_${fileId} img`); + if ( imageElement ) { + imageElement.src = `${ppom_file_vars.plugin_url}/images/loading.gif`; + } - // Removing file container - $(this).closest('.u_i_c_box').remove(); + const data = new URLSearchParams({ + action: 'ppom_delete_file', + file_name: fileName, + ppom_nonce: ppom_file_vars.ppom_file_delete_nonce + }); - // Removing cropper dom - if ($(".ppom-croppie-preview-" + fileid).length > 0) { - $(".ppom-croppie-preview-" + fileid).remove(); + try { + const response = await fetch(ppom_file_vars.ajaxurl, { + method: 'POST', + body: data, + headers: { + 'Content-Type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' } + }); - // Trigger - $.event.trigger({ - type: "ppom_uploaded_file_removed", - field_name: file_data_name, - fileid: fileid, + const responseText = await response.text(); + if ( ! response.ok ) { + confirm(`Error: ${responseText}`); + return; + } + + // Update UI + const fileContainer = document.querySelector(`#u_i_c_${fileId}`); + if ( fileContainer ) { + fileContainer.remove(); + } + + if ( checkbox ) { + checkbox.remove(); + } + + const parentBox = e.target.closest('.u_i_c_box'); + if ( parentBox ) { + parentBox.remove(); + } + + const croppiePreview = document.querySelector(`.ppom-croppie-preview-${fileId}`); + if ( croppiePreview ) { + croppiePreview.remove(); + } + + // Send action to PPOM_Validate + document.dispatchEvent(new CustomEvent("ppom_uploaded_file_removed", { + detail: { + field_name: fileDataName, + fileid: fileId, time: new Date() - }); + } + })); - field_file_count[file_data_name] -= 1; - }); + // Decrease file count + field_file_count[fileDataName] -= 1; + + } catch (error) { + confirm(`Error: ${error.message}`); } });