How to disable file input text box in IE?

Question

Is it possible to prevent a user from typing in a file input text box in IE? The reason I ask is that if a user enters text that does not look like a file system path (eg. doesn't start with something like c:...) then when the user clicks the submit button nothing will happen.

I would either like to not allow the user to type in the box or have the form submit as normal.

I have found that the same question was asked here with no answer: http://www.webmasterworld.com/html/3290988.htm

And this person came up with a hack which I can use if there is no other suitable answer: http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom

EDIT: To clarify - if the user types "not a file path" in the text box next to the "Browse" button and clicks submit, in IE nothing will happen. The form will not submit - IE does not allow a form to be submitted when a <input type="file"> box does not have a real file path.

Answer 1

Couldn't you use

<input ... disabled>

EDIT:no, actually that prevents submission as well... but in HTML 4 apparently

<input ... readonly>

should work. http://htmlhelp.com/reference/html40/forms/input.html

Answer 2

one way is to put a little javascript code in the buttons onsubmit. The idea being to validate the box and either stop submission or allow it.

However, you are probably better off just validating the file contents server side and rendering the appropriate error back to the client.

Answer 3

This may be a bad idea to begin with. What if the user is not using a Windows OS and wants to upload the file /home/user/example.txt?

This type of check might be better implemented server side.

Answer 4

I solved this with another way using a button rather than a submit and using JavaScript to check the value before submitting.

<input type="file" name="inputFile">
<input type="button" onclick="if(fileHasValidPath()) { submitForm(); }" value="Submit">

function fileHasValidPath() {
  if (isIE()) {
    var inputFile = document.forms[0].inputFile;
    if (inputFile.value != "" && /^(\w:)|(\\)/.test(inputFile.value)) {
      alert("File is not a valid file.  Please use the Browse button to select a file.");
      inputFile.select();
      inputFile.focus();
      return false;
    }
  }

  return true;
}

function submitForm() {
  document.forms[0].submit();
}

I realise there still needs to be server-side validation for the file but this is only to prevent a user clicking on the Submit button and not seeing anything happening. Also, it assumes IE using a Windows OS.

Answer 5

How about this one? You can't type, or right click and paste.

<input type="file" name="file" onKeyDown="this.blur()" onContextMenu="return false;">

Answer 6

hi I am trying to get an input text box in my form to be text-selection disabled. I did this with disabled=disabled, and it workds in safari, firefox, opera but not in IE. Can you help me with this? thanks