Success message after clicking on delete file upload

[user5b9a8430aeb527.8 (Alan Grace)]

For accessibility I need to display some form of success message when the user clicks on the delete option (trash can) for a file upload. Is there some way to hook into the delete function and display a message underneath but button when the user deletes a file?

[faisalahammad]

Hey Alan,

You can use a jQuery click event to trigger a function. For example, when the delete button is clicked, you can append the delete message using the sample code block below.

Please replace the .delete_btn CSS class with the real delete button class for the code to work properly.

You can add the following code in the child theme’s JavaScript (.js) file or use the Simple Custom CSS and JS plugin from this link: Simple Custom CSS and JS – WordPress plugin | WordPress.org.

jQuery(document).ready(function($){
  $(".delete_btn").click(function() {
    if ($(this).parent().find(".delete-message").length === 0) {
      $(this).after('<div class="delete-message">File successfully deleted!</div>');
    }
  });
});

Give it a try, and let me know how that goes!

[user5b9a8430aeb527.8 (Alan Grace)]

Hi Faisal,

Thanks for the reply - I added the code to the theme js file and updated the delete_btn class.
The class for the button is “gform_delete_file gform-theme-button gform-theme-button–simple”

• see the attached screenshot. But it doesnt appear to be working.

On the next line of your code where you refer to “.delete-message” where is that displayed?

[faisalahammad]

Hey Alan,
Sorry for the delay. Please try the following code in the Child theme’s JavaScript file (main.js or script.js).

jQuery(document).ready(function($){
    $(document).on('click', 'button.gform_delete_file', function() {
        setTimeout(function() {
            var msgElement = $('<div class="delete-message" style="color: green; text-align: center;">File successfully deleted!</div>');
            $('.ginput_preview_list').append(msgElement);

            setTimeout(function() {
                msgElement.remove();
            }, 2000);

        }, 500);
    });
});

After that, the preview will look like the following screen recording.

Give it a try, and let me know how that goes!