473,566 Members | 3,004 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

Can I execute a javascript action before uploading a file?

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.getE lementById("btn Back");
w.disabled=true ;
var x=document.getE lementById("btn Upload");
x.disabled=true ;
var y=document.getE lementById("inp utFile");
y.disabled=true ;
}
</script>
</head>
<body>
<form id="Form1" encType="multip art/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(objec t sender, System.EventArg s e)
{
// add onclick client-side event to button
btnUpload.Attri butes.Add("oncl ick", "DisableControl s()");
}

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

Nov 19 '05 #1
4 2782
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
The added attribute should read...

btnUpload.Attri butes.Add("oncl ick", "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.getE lementById("btn Back");
w.disabled=true ;
var x=document.getE lementById("btn Upload");
x.disabled=true ;
var y=document.getE lementById("inp utFile");
y.disabled=true ;
}
</script>
</head>
<body>
<form id="Form1" encType="multip art/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(objec t sender, System.EventArg s e)
{
// add onclick client-side event to button
btnUpload.Attri butes.Add("oncl ick", "DisableControl s()");
}

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

Nov 19 '05 #3
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.H tmlControls.Htm lInputFile inputFile;

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

I now get an exception saying: "System.NullRef erenceException : 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
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.H tmlControls.Htm lInputFile inputFile;

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

I now get an exception saying: "System.NullRef erenceException : 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 thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

3
5535
by: dvdljns | last post by:
How do I make this script direct uploads to a folder called incoming. <!-- TWO STEPS TO INSTALL UPLOAD FILTER: 1. Copy the coding into the HEAD of your HTML document 2. Add the last code into the BODY of your HTML document --> <!-- STEP ONE: Paste this code into the HEAD of your HTML document -->
2
2697
by: david | last post by:
Hello all, let's me explains my long problem: I'm doing an intranet with a media part. So im must be able to upload files on a ftp server AND have a record of informations about this file and meta date in a MySQL database, shown in a php page. So the first thing i was doing was:
6
6067
by: nate | last post by:
Hello, Does anyone know where I can find an ASP server side script written in JavaScript to parse text fields from a form method='POST' using enctype='multipart/form-data'? I'd also like it to parse the filename. <form name='form1' method='POST' enctype='multipart/form-data' action='sub.asp'> <input type='text' name='title1'...
21
66781
by: strutsng | last post by:
<input type="file"> only allows the user to browse for files. How about "browse for folder" dialog? Can html/javascript do that? I couldn't find any syntax for that. If not, please advise what are the other approaches. please advise. thanks!!
1
1203
by: Harry | last post by:
I have a couple of questions concerning both asp.net and javascript, if anyone could take some time to enlighten me on this I'd appreciate it a lot, and sorry if JScript is out of topic on this forum - in that case ignore this post. - Is there any way in javascript to retrieve the favorites from the user browser, so that they could be...
4
4056
by: Ian Kelly | last post by:
Hi All, I have an .net form that is split into two frames. The left frame has a tree that displays a list of all the customers. The right frame displays the appropriate clients information. When the save button is pressed on the right frame, I want to update the tree in the left frame AFTER saving all the data as the changes to the right...
27
4701
by: Chris | last post by:
Hi, I have a form for uploading documents and inserting the data into a mysql db. I would like to validate the form. I have tried a couple of Javascript form validation functions, but it appears that the data goes straight to the processing page, rather than the javascript seeing if data is missing and popping up an alert. I thought it...
8
6688
by: M.L. | last post by:
Hello. I created a form using JS validation with the form tag as follows: <form name="form1" action="dynaform.php" method="post" onsubmit="return pvg_sub();"> The js validation script sends alerts when fields are not entered properly and it seems to work, except...when there are no errors, instead executing the php action script, I get a...
0
1845
Fary4u
by: Fary4u | last post by:
Hi Guys i'm trying to upload a file, i've tried 3 different methods but still not work out i don't know how to over come this problem hidden file value, multiple form or popup uploading. 1- <SCRIPT TYPE="text/javascript"> function popupform(myform, windowname)
0
7673
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However, people are often confused as to whether an ONU can Work As a Router. In this blog post, we’ll explore What is ONU, What Is Router, ONU & Router’s main...
0
7584
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can effortlessly switch the default language on Windows 10 without reinstalling. I'll walk you through it. First, let's disable language...
0
7893
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers, it seems that the internal comparison operator "<=>" tries to promote arguments from unsigned to signed. This is as boiled down as I can make it. ...
0
8109
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven tapestry of website design and digital marketing. It's not merely about having a website; it's about crafting an immersive digital experience that...
0
7953
tracyyun
by: tracyyun | last post by:
Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each protocol has its own unique characteristics and advantages, but as a user who is planning to build a smart home system, I am a bit confused by the...
0
6263
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing, and deployment—without human intervention. Imagine an AI that can take a project description, break it down, write the code, debug it, and then...
0
5213
by: conductexam | last post by:
I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and then checking html paragraph one by one. At the time of converting from word file to html my equations which are in the word document file was convert...
0
3626
by: adsilva | last post by:
A Windows Forms form does not have the event Unload, like VB6. What one acts like?
1
1202
muto222
by: muto222 | last post by:
How can i add a mobile payment intergratation into php mysql website.

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.