AjaxForm clear file input element

Question

I have a html form that I have turned into an ajaxForm via the ajaxForm({...}) call. One of the elements is a fileInputElement. Also, I have integrated a MultiSelector (MultiSelector Source). When the input element changes I do some validation to make sure the user selected a file that matches something they marked on the web page. The issue I have is, if the user selects a bad file, I return false, but then the file input element is still pointing at the 'bad' file that the user selected. I would either like to prevent this or clear it after returning false. Any ideas?

For reference, simply changing the value of a file input element is not allowed for security reasons. I tried the 'innerHTML' trick of setting innerHTML to itself, but that did not work either.

Dmitry F · Accepted Answer · 2011-08-31 17:24:24Z

4

Quick JS solution - just replace it, with a new one (not ideal, but should work):

Something along those lines:

HTML:

<div id="some_file_field_wrapper">
    <input type="file" />
</div>

JavaScript:

var file_html = '<input type="file" />';
var elem_id   = 'some_file_field_wrapper';
document.getElementById( elem_id ).innerHTML = file_html;

answered Aug 31, 2011 at 17:24

Dmitry F

1,6701 gold badge15 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Joseph Over a year ago

I realized this after I posted that this was probably the best way to go. This is the solution I more or less ended up using. Due to using Multifile, I ended up basically adding a new file input before the one to be deleted, then removed the one to be deleted from the parentNode.

Baz1nga · Accepted Answer · 2011-08-31 17:34:20Z

2

here is a post explaining how to do the same using jquery.. : http://www.electrictoolbox.com/clear-upload-file-input-field-jquery/

hope this helps...

answered Aug 31, 2011 at 17:34

Baz1nga

15.6k3 gold badges38 silver badges63 bronze badges

1 Comment

Joseph Over a year ago

I did try resetting the form, but that clears everything. I found another solution as marked below, but this may still be a valid option.

Collectives™ on Stack Overflow

AjaxForm clear file input element

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related