Stop IE users typing into the file upload input

Question

My testers have discovered that if you type free text into a file upload input then none of the buttons on the page work until that text is removed (so the page cannot be submitted).

I am able to replicate this with the following ASPX code (with no code behind):

<%@ Page Language="C#" AutoEventWireup="true" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
  <body>
    <form id="form1" runat="server">
      <div>
        <asp:FileUpload ID="fuTest" runat="server" />
        <asp:Button ID="btnSubmit" runat="server" Text="Submit" />
      </div>
    </form>
  </body>
</html>

(Note that I haven't bound any handlers to the page; despite this, the page is submitted when the submit button is clicked only if no text is entered into the upload text box)

Is there any way to prevent users from typing free text into a file upload control? It seems that this is only possible in IE - Firefox and Chrome natively prevent text from being entered into upload input fields.

I've seen solutions elsewhere which suggest hiding input and replacing it with a label / button combo, but this seems like it might cause more problems and work inconsistently across browsers.

Any thoughts?

I have a upload application with a file upload input control and I have found that typing free text into the control does NOT keep my other buttons from working. Tested with IE7. — DaveB, Mar 17 '10 at 15:50
@DaveB I've updated with a self contained example which definitely exhibits the behaviour that I'm describing in IE6. — Dexter, Mar 30 '10 at 19:29
Thanks for pointing out this 'feature' of the control in IE. The page I tested with had 2 forms on it and the buttons in the 2nd form still worked, hence my original comment. — DaveB, Mar 31 '10 at 00:04

score 5 · Accepted Answer · answered Mar 30 '10 at 19:37

As per @Jer's suggestion, I was able to prevent input into the file upload without breaking any of the other functionality by handling keypress events on the upload. Using jQuery:

$(document).ready() {
    $('input:file').keypress(function() {
      return false;
    });
}

score 2 · Answer 2 · answered Mar 17 '10 at 15:42

2

I'm not sure if this would work as expected, but have you tried: <input readonly="readonly">

answered Mar 17 '10 at 15:42

Jeremy

22,188
4
68
81

That disables input completely in IE - the "Browse" button no longer works (although it doesn't appear disabled, it just do nothing). Interestingly, adding readonly="readonly" does nothing in Firefox or Chrome – Dexter Mar 17 '10 at 15:49
2

Can you add a keypress event that negates any input from the keyboard? Again, I'm not sure if this would work with the file input element-- just throwing out ideas. – Jeremy Mar 17 '10 at 16:33
Handling the keypress does work, thanks @Jer. I've included my solution as an answer here. – Dexter Mar 30 '10 at 19:35
Ironically I had to take my own advice today to fix an issue at work :-P – Jeremy Mar 30 '10 at 20:02

score 1 · Answer 3 · edited Aug 02 '11 at 15:57

1

The accepted answer is perfectly fine for all the existing file controls.

But in most of the practical situations, we provide functionality to add more file controls on the fly so that users can select more than one file.

Key for the solution in this case was the .live function.

The solution will be as follows:

$('input:file').live('keypress', function() { return false; });

edited Aug 02 '11 at 15:57

mercator

28,290
8
63
72

answered Aug 01 '11 at 21:17

user669915

21
1
6

Stop IE users typing into the file upload input

3 Answers3

Linked