ansaurus

Question

Trying to upload a non-existent file in Internet Explorer, form is not submitted

Answer 1

+1 A:

You should add an "onclick()" event to the submit button which calls a JavaScript function that tests for your condition and uses a JavaScript "alert" to let the user know that they need to enter something worthy of submitting.

Look into Regular Expressions for your tests.

If you want the user to make a decision, use a confirm().

If you want to simply alert them and not test their value, you can use something like:

<input type="submit" value="clickme" onClick="if (confirm('Really submit?')) { this.form.submit(); }">

Here's some sample code that will get you the value from a JavaScript function call within an onclick():

<html>
    <head>
        <title>hello world</title>
        <SCRIPT LANGUAGE="javascript" type="text/javascript">
            function show_me(form_elem) {
            alert(form_elem.value);
            }
        </script>
    </head>
    <body>
        <form method="GET" name="upload_form" action="index.html" target="_top">
            <input type="file" name="file_name" size="14" maxlength="256" value="">
            <br>
            <input type="submit" value="mybutton" onclick="show_me(this.form.file_name)" />
        </form>
    </body>
</html>

madcolor 2009-03-27 20:26:21

javascript does not have access to the value of an <input type=file> for security purposes.

tj111 2009-03-27 20:33:41

@tj111: JavaScript can read the value of an <input type=file> in every major browser, it can't set it for security purposes.

Grant Wagner 2009-03-27 21:04:11

Agreed.. my revised answer has the proof.

madcolor 2009-03-27 21:06:32

It also won't necessarily read the whole filename... “a” might well be perfectly valid, there's nothing you can really do to ‘validate’ a filename other than check it's not an empty string.

bobince 2009-03-27 22:53:10

Also putting the validation in the submit button click is unreliable as forms can be submitted other ways. And calling submit() in the event itself can cause a broken double submission. Have form.onsubmit return true to allow, or false to deny, a submission.

bobince 2009-03-27 22:54:31

Answer 2

A:

You could mimic the Firefox behaviour with the following:

<input type="file" name="test" onkeypress="this.click();return false;">

When the user tries to type in the file input, it pops up the file chooser.

Obviously this won't work if the client has JavaScript disabled, but depending on your requirements, it might be "good enough".

Appears to work okay in IE 6, 7 and 8.

It works okay in Firefox 3 (since it doesn't allow typing in an <input type=file>).

It works okay in Safari for Windows 3 & 4 (since it doesn't allow typing in an <input type=file>).

In Opera 9 (which allows typing in an <input type=file>) it doesn't do anything (doesn't pop up the chooser or swallow the keypresses). The onkeypress event doesn't seem to fire at all actually, probably for security.

In Firefox 2 it does not work (which allows typing in an <input type=file>) because this.click() doesn't pop up the chooser and return false swallows the keypresses.

Grant Wagner 2009-03-27 21:05:17

For me, in IE6, calling .click() on a file input field breaks the form. You can choose a file OK, but the form then won't submit, in the same way the OP is talking about.

bobince 2009-03-27 22:56:14

Answer 3

A:

I found a better way to do this: http://www.priddypictures.co.uk/reference/fileInputProblem.htm

So, if those guys/gals are right, and form submits fine if the input does not have a name attribute then:

write a jQuery plug-in that will (if Internet Explorer) remove the name attribute from all file inputs
insert another hidden input into the form with a correct name
copy the value from file input to hidden input

I might write this plug-in at some point.

mkoryak 2009-03-30 13:28:49

ansaurus

tags:

views:

answers:

Trying to upload a non-existent file in Internet Explorer, form is not submitted

related questions