How to make a file upload field empty in struts2 using javascript?

Question

I have a file upload field,that is,<s:file> </s:file>. And I have a button "clear". On clicking this button, the field which has some file link should become empty.Could anyone help me with this?

My code:

<s:file id="filetestplanid2" name="testPlanDto.testFile" label="test"
        tooltipIconPath="../../KY/images/common/buttons/uploadBtn.png"  
        title="Browse" tooltip="Browse..."  cssClass="file" />

My javascript:

$('#filetestplanid2').val(null);
$('#filetestplanid2').val("");

I tried these but no luck.

Also tried:

var file = $("#filetestplanid2"); file.replaceWith(file = file.clone(true));

$('#filetestplanid2').html( $('#filetestplanid2').html() );

Possible duplicate of 'How to only clear file upload field?' http://stackoverflow.com/questions/9118738/how-to-only-clear-file-upload-field — Vignesh Paramasivam, Jun 18 '13 at 12:06
Your example shows different IDs. Are you sure you're trying to empty the correct element? — Reinstate Monica Cellio, Jun 18 '13 at 12:07
@Vignesh: No, this is not a duplicate. The one which you mentioned is about normal file upload. But this is with struts. — kishore, Jun 18 '13 at 12:33
@kishore That makes zero difference; S2 tags render HTML--what else could they do? — Dave Newton, Jun 18 '13 at 13:06
possible duplicate of [Clearing using jQuery](http://stackoverflow.com/questions/1043957/clearing-input-type-file-using-jquery) — Roman C, Jun 18 '13 at 13:43

score 1 · Answer 1 · edited May 23 '17 at 12:15

1

Assuming

<input type="button" onclick="clearFileElement('filetestplanid2');" />

Vanilla JS

function clearFileElement(fileId){
    document.getElementById(fileId).value = '';
};

Demo: http://jsfiddle.net/2nxGr/

Can't make it works with jQuery but basically you have to substitute it with a clone of itself (with all the properties, gained using clone(true)).

Just stick to the plain JS version, it works like a charm.

EDIT

I've found now a very smart solution that works on every browser: https://stackoverflow.com/a/13351234/1654265

edited May 23 '17 at 12:15

Community

1
1

answered Jun 18 '13 at 12:10

Andrea Ligios

49,480
26
114
243

@kishore Then check your assumptions: inspect the element and see its ID. Check the JS console. Debug. – Dave Newton Jun 18 '13 at 13:07
1

The first solution works too, and IT IS an answer. I edited to add a better one I found, to help more users. Could you please stop downvoting my answers ? I mean like here: http://stackoverflow.com/a/17060676/1654265 – Andrea Ligios Jun 18 '13 at 13:52

score 0 · Answer 2 · answered Apr 15 '18 at 09:04

0

You can make it empty using Jquery too, just like this:

$("#filetestplanid2")[0].value = ""

or

$("#filetestplanid2").get(0).value = ""

answered Apr 15 '18 at 09:04

Muhammad Musavi

2,512
2
22
35

How to make a file upload field empty in struts2 using javascript?

2 Answers2

Linked