By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,850 Members | 970 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,850 IT Pros & Developers. It's quick & easy.

Can I execute a javascript action before uploading a file?

P: n/a
I've been trying to execute a javascript function just before submit on a
form that contains an <input type="file"> input field and it isn't working.
The reason I want to do this is the end users will be uploading files that
are between 1 and 2 Meg. in size, and they are not too knowledgeable about
computers. I want to disable the form buttons so they can't hit them after
they hit the "upload" button. We're trying to prevent them from repeatedly
hitting the "upload" button, or hitting some other button on the form in the
midst of the upload.

What I've run into is if I have the button control process a client-side
onclick event it runs my javascript, but then does not submit the form. It
does this no matter what kind of button control I've used. I've tried using
the <input type="submit"> standard HTML button, as well as the <asp:button>
control. I've also tried submitting the form from my javascript, and it
submits it to the server, but then the server side button click message
doesn't fire.

I'm wondering if it isn't working because this input tag is in the form, or
if I'm doing something wrong. Here's a sketch of the page:

<head>
<script type="text/javascript">
function DisableControls()
{
var w=document.getElementById("btnBack");
w.disabled=true;
var x=document.getElementById("btnUpload");
x.disabled=true;
var y=document.getElementById("inputFile");
y.disabled=true;
}
</script>
</head>
<body>
<form id="Form1" encType="multipart/form-data" runat="server">
...
<input id="inputFile" type="file" runat="server">
<asp:Button id="btnUpload" runat="server" Text="Upload"></asp:Button>
</form>
</body>

In my codebehind I have:

private void Page_Load(object sender, System.EventArgs e)
{
// add onclick client-side event to button
btnUpload.Attributes.Add("onclick", "DisableControls()");
}

// btnUpload is wired to this function on the server
protected void btnUpload_Click(object sender, System.EventArgs e)
{
...
}

Nov 19 '05 #1
Share this Question
Share on Google+
4 Replies


P: n/a
Hi Mark.

You can make the page behave like it has been submitted just with a bit
of javascript.

By default an ASP:Button object can fire an OnClick event to call a
function back on the server side. This however is essentially an
argument passed to the postback handler though and then ASP.NEt picks
it up server side before any of your processing begins and executes the
function.

So the way to fool it is keep the page as you have it now, all working
fine but the extra function you want called not being called. Once you
have it absolutely working for a basic click take a look at the code
and in particular look at the Javascript the input button calls which
ultimately results in a __doPostBack().

Trace through the function parameters and now you know the bit of JS
you need to call and what parameters to pass it in order to make the
Submit_OnClick function work on the server.

Simply change the ASP:Button object into a plain old html button
instead that with it's OnClick event fires your JS function that
disables all the buttons etc and from that function submit the form
with the JS function call you traced from the old button...

Cheers
AndrewF

Nov 19 '05 #2

P: n/a
The added attribute should read...

btnUpload.Attributes.Add("onclick", "javascript: return DisableControls()");

This should ensure the server side event runs after the javascript. To
prevent the server side event running just add "return false;" at the end of
your DisableControls routine, else add "return true;".

hth
Terry.

"Mark Miller" wrote:
I've been trying to execute a javascript function just before submit on a
form that contains an <input type="file"> input field and it isn't working.
The reason I want to do this is the end users will be uploading files that
are between 1 and 2 Meg. in size, and they are not too knowledgeable about
computers. I want to disable the form buttons so they can't hit them after
they hit the "upload" button. We're trying to prevent them from repeatedly
hitting the "upload" button, or hitting some other button on the form in the
midst of the upload.

What I've run into is if I have the button control process a client-side
onclick event it runs my javascript, but then does not submit the form. It
does this no matter what kind of button control I've used. I've tried using
the <input type="submit"> standard HTML button, as well as the <asp:button>
control. I've also tried submitting the form from my javascript, and it
submits it to the server, but then the server side button click message
doesn't fire.

I'm wondering if it isn't working because this input tag is in the form, or
if I'm doing something wrong. Here's a sketch of the page:

<head>
<script type="text/javascript">
function DisableControls()
{
var w=document.getElementById("btnBack");
w.disabled=true;
var x=document.getElementById("btnUpload");
x.disabled=true;
var y=document.getElementById("inputFile");
y.disabled=true;
}
</script>
</head>
<body>
<form id="Form1" encType="multipart/form-data" runat="server">
...
<input id="inputFile" type="file" runat="server">
<asp:Button id="btnUpload" runat="server" Text="Upload"></asp:Button>
</form>
</body>

In my codebehind I have:

private void Page_Load(object sender, System.EventArgs e)
{
// add onclick client-side event to button
btnUpload.Attributes.Add("onclick", "DisableControls()");
}

// btnUpload is wired to this function on the server
protected void btnUpload_Click(object sender, System.EventArgs e)
{
...
}

Nov 19 '05 #3

P: n/a
Thanks for the response. I think I get what you were getting at. I did as you
suggested (changed my button to <input type="button">, got the javascript,
then changed it back to <asp:button> with the javascript hard-coded into my
page). This restored the submit functionality I expected for the most part,
allowing me to disable the buttons on the page before the submit, and it
fires the btnUpload_Click() event.

However, now the file upload no longer works. As I said in my previous
message I have a <input type="file" id="inputFile" runat="server"> tag in the
form.

In my code I have:

protected System.Web.UI.HtmlControls.HtmlInputFile inputFile;

and when I try to get the filename out of it, as in "if
(inputFile.PostedFile.FileName == "")"

I now get an exception saying: "System.NullReferenceException: Object
reference not set to an instance of an object."

This happens even if I actually give inputFile a path on the form.

I've seen this before. After much trial and error it's looking like <input
type="file"> is a very, very touchy beast. You have to handle it in just the
right way or it fails. I have a feeling a good part of this is security
functionality built in to IE. They don't want hackers to be allowed to alter
which file gets uploaded or where it's uploaded to.

If I don't call DisableControls() and/or __doPostBack(), then the file
upload works. Ironically, if I add client-side field validators (dragging and
dropping them from the IDE toolbox), it'll allow those. The field validators
insert javascript into both the <form> tag, setting the onsubmit action, and
they put javascript into the onclick action of my button. The file upload
still works. Not sure why.

Any other suggestions?

---Mark

"AndrewF" wrote:
Hi Mark.

You can make the page behave like it has been submitted just with a bit
of javascript.

By default an ASP:Button object can fire an OnClick event to call a
function back on the server side. This however is essentially an
argument passed to the postback handler though and then ASP.NEt picks
it up server side before any of your processing begins and executes the
function.

So the way to fool it is keep the page as you have it now, all working
fine but the extra function you want called not being called. Once you
have it absolutely working for a basic click take a look at the code
and in particular look at the Javascript the input button calls which
ultimately results in a __doPostBack().

Trace through the function parameters and now you know the bit of JS
you need to call and what parameters to pass it in order to make the
Submit_OnClick function work on the server.

Simply change the ASP:Button object into a plain old html button
instead that with it's OnClick event fires your JS function that
disables all the buttons etc and from that function submit the form
with the JS function call you traced from the old button...

Cheers
AndrewF

Nov 19 '05 #4

P: n/a
Well it looks like I found the answer to my own question. I did some testing
and it looks like what's going on is IE detects if I've altered anything on
the page (via. javascript) before the upload, and if so, it cancels the
submit and therefore the upload.

If I created a javascript function whose only action was to return true, and
called that from my button instead, then the submit would go through, as
would the upload, and the button's Click event would fire on the server. No
special tricks needed. So, it was definitely reacting to the fact that I was
altering the page before the upload.

It looks like if I want to be able to do stuff with the page just before the
upload I'll need to use an ActiveX control to do the upload.

---Mark

"Mark Miller" wrote:
Thanks for the response. I think I get what you were getting at. I did as you
suggested (changed my button to <input type="button">, got the javascript,
then changed it back to <asp:button> with the javascript hard-coded into my
page). This restored the submit functionality I expected for the most part,
allowing me to disable the buttons on the page before the submit, and it
fires the btnUpload_Click() event.

However, now the file upload no longer works. As I said in my previous
message I have a <input type="file" id="inputFile" runat="server"> tag in the
form.

In my code I have:

protected System.Web.UI.HtmlControls.HtmlInputFile inputFile;

and when I try to get the filename out of it, as in "if
(inputFile.PostedFile.FileName == "")"

I now get an exception saying: "System.NullReferenceException: Object
reference not set to an instance of an object."

This happens even if I actually give inputFile a path on the form.

I've seen this before. After much trial and error it's looking like <input
type="file"> is a very, very touchy beast. You have to handle it in just the
right way or it fails. I have a feeling a good part of this is security
functionality built in to IE. They don't want hackers to be allowed to alter
which file gets uploaded or where it's uploaded to.

If I don't call DisableControls() and/or __doPostBack(), then the file
upload works. Ironically, if I add client-side field validators (dragging and
dropping them from the IDE toolbox), it'll allow those. The field validators
insert javascript into both the <form> tag, setting the onsubmit action, and
they put javascript into the onclick action of my button. The file upload
still works. Not sure why.

Any other suggestions?

---Mark

"AndrewF" wrote:
Hi Mark.

You can make the page behave like it has been submitted just with a bit
of javascript.

By default an ASP:Button object can fire an OnClick event to call a
function back on the server side. This however is essentially an
argument passed to the postback handler though and then ASP.NEt picks
it up server side before any of your processing begins and executes the
function.

So the way to fool it is keep the page as you have it now, all working
fine but the extra function you want called not being called. Once you
have it absolutely working for a basic click take a look at the code
and in particular look at the Javascript the input button calls which
ultimately results in a __doPostBack().

Trace through the function parameters and now you know the bit of JS
you need to call and what parameters to pass it in order to make the
Submit_OnClick function work on the server.

Simply change the ASP:Button object into a plain old html button
instead that with it's OnClick event fires your JS function that
disables all the buttons etc and from that function submit the form
with the JS function call you traced from the old button...

Cheers
AndrewF

Nov 19 '05 #5

This discussion thread is closed

Replies have been disabled for this discussion.