How to set "Files of type" when using a "File Browse" item.

Question

Apex 4.0.2
Internet Explorer 7 +
I have a "File Browse" item on a page and need to limit the types of files display to just "text (.txt)" files. How can this be done? Currently, the "Files of type" list shows "All File (*.*)", "Pictures (*.gif,*.png)", and HTML (*.htm,*.html)". In the best case, I would like to not have the "Files of type" list and have the user just limited to text files. However, adding Text files (*.txt)" to the "Files of type" list is ok.
thanks,
William

Answer 1

Thought i'd do a bit of research after seeing Scotts wonderful ideas.
So it turns out, IE made the file item read only from version 8, for security reasons. Read more: http://blogs.msdn.com/b/ie/archive/2008/07/02/ie8-security-part-v-comprehensive-protection.aspx
File Upload Control
Historically, the HTML File Upload Control (<input type=file>) has been the source of a significant number of information disclosure vulnerabilities. To resolve these issues, two changes were made to the behavior of the control.
To block attacks that rely on “stealing” keystrokes to surreptitiously trick the user into typing a local file path into the control, the File Path edit box is now read-only. The user must explicitly select a file for upload using the File Browse dialog.
Additionally, the “Include local directory path when uploading files” URLAction has been set to "Disable" for the Internet Zone. This change prevents leakage of potentially sensitive local file-system information to the Internet. For instance, rather than submitting the full path C:\users\ericlaw\documents\secret\image.png, Internet Explorer 8 will now submit only the filename image.png.To resetting the actual items, suggestions I found were to replace the actual item. So instead of using $s, I just replace the element, with the existing element, causing it to re-initialise.
var htmldb_delete_message='"DELETE_CONFIRM_MSG"';
function fileCheck(el){
    if(el.value){
        var validFile = false;
        var validExtensions = ["csv"];
        var filename = el.value;
        var fileExtIndex = filename.lastIndexOf(".");
        var fileExt = filename.substring(fileExtIndex+1, filename.length);
        for(i = 0; i < validExtensions.length; i++){
            if(validExtensions[i] == fileExt){
                validFile = true;
                break;
        if ( !validFile || fileExtIndex == -1) {
            alert("Invalid Extension. Permitted files must end with: " + validExtensions.toString());
            var htmlContents = el.outerHTML || new XMLSerializer().serializeToString(el);
            $('#P16_BINARY').replaceWith(htmlContents);
}(obviously, replacing what you need to, to suit your page - i prefer scotts idea of passing in supported file types in the function, so would just pass in an array instead; but this is just for demonstration)
with an onchange="checkFile(this)" on the element attributes.
On a slightly un-related note, I found out IE doesn't support the wonderful indexOf function on arrays, that checks for the existence of the value in an array. Sucks.
Edited by: trent
Ah well, jQuery is there, maybe i should use that for searching arrays in the future.
http://api.jquery.com/jQuery.inArray/
Edited by: trent
Forgot a demo link, for csv files: http://apex.oracle.com/pls/apex/f?p=45448:16
Edited by: trent
Modify function. Didn't work in Firefox