Webforms: Is it possible to set a delete field button?

Question

As far as I understand there is not possible do delete the field value of file upload fields but rather replacing the field with an empty one.

1. Is it possible to add this button using JS and thus delete the text path inside the field without refreshing the page (PLAIN SIMPLE)? Otherwise I am afraid i need to use a php solution with page refresh.

2. If not is it possible for 'Delete' to emulate the 'Browse' button? I mean when hitting 'Delete' to actually browse for another file?

ps. I know webforms are using their own implementation but I am force to find another solution

Answer 1

This link seems to have some solution. Clear upload file input field with jQuery

The relevant js is given below.

The HTML of any element can be reset with jQuery using the following function and passing in the id of the element's parent. This will reset the HTML within the parent to its original state; it will lose any binding you'd added after the DOM was loaded (such as adding an event handler in $(document).ready). Here's the Javascript for doing this:

function reset_html(id) {
    $('#'+id).html($('#'+id).html());
}

In $(document).ready we can now add a div around every element with a clear button, binding a function to it which will reset the HTML of the div like so:

$(document).ready(function() {

    var file_input_index = 0;
    $('input[type=file]').each(function() {
        file_input_index++;
        $(this).wrap('<div id="file_input_container_'+file_input_index+'"></div>');
        $(this).after('<input type="button" value="Clear" onclick="reset_html(\'file_input_container_'+file_input_index+'\')" />');
    });

});

Note : I have not tested this out myself.