Question

How is it possible to make ‘Delete’ (I will rename it ‘Replace’) button emulate Browse button?
I mean when hitting ‘Delete’ to actually browse for another file?

Answer 1

You can use JQuery, see the jsfiddle http://jsfiddle.net/AF2c5/1 for a working example:

The HTML markup:

<input type="file" id="fileButton" />
<button id="myButton">Delete</button>

And the javascript:

$('#myButton').on('click', function() {
    $('#fileButton').click();
});

You can also remove the original file input and only browse with a custom button: http://jsfiddle.net/AF2c5/2/:

<input type="file" id="fileButton" style="display: none" />

Be aware that hiding the input can break in certain (mobile) browsers. Then you are better off with positioning the original input off screen instead of hiding it, see http://jsfiddle.net/AF2c5/3/:

<input type="file" id="fileButton" style="position: absolute;  top: -50%; left: -50%" />

Hope it helps.