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

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 2

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 3

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 4

the input type=file element's value property is readonly as for security issue. You can read this property and do a check. If it is not correspond with your rules, you will give a warn and let person to modify it. The other way use outerHTML property override it. for example: HTML input file element called objInputFileElement. objInputFileElement.outerHTML="";

Answer 5

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 6

I found the option that solves your issue. Is the contentEditable option as follows:

<input type="file" name="name" contentEditable="false"/>

Answer 7

Here is a demonstration of the contentEditable option:

<input type="file" name="name" contentEditable="false" />

Answer 8

I based my solution on this thread.

So, considering this file field:

<input type="file" id="file_field">

I got it to work with something like this in jquery:

$(document).ready( function() {
    $('#file_field').bind("keydown", function(e) {
        e.preventDefault();
    });
});

NOTE: You must use keydown instead of keypress as it covers DEL and BACKSPACE as well as any print key.

Answer 9

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