Home     Products      Support      Corporate     Sign In 
Support Knowledge Base, Article 921
Using your own button to start a JFile upload
Can I hide JFile's Upload button and use my own HTML button on the webpage to start the upload?

Yes. This is all done client-side using HTML and JavaScript.

Hiding JFile's Upload Button

To hide JFile's upload button include and set the DisableUploadButton param to 1 inside JFile's applet tag, like this:

<PARAM NAME="disableuploadbutton" VALUE="1">

Adding Your Own Button

To use your own button do the following:

  1. Add a button to your webpage.
  2. Add an onClick event to the button which executes the following JavaScript code:
    where "fileupload" is the name assigned to the Applet.

The example below is the body of a webpage where JFile is displayed on the page with the Upload button hidden. The page also contains an HTML button which starts the upload.

 <form id="Form1" method="post" runat="server">
  <APPLET id="UploadClient_Dispatch1" height="300" width="500"
  name="fileupload" VIEWASTEXT mayscript>
   <PARAM NAME="disableuploadbutton" VALUE="1">
   <PARAM NAME="posturl" VALUE="http://localhost/JFileSample/formresp.asp">
   <PARAM NAME="useappletinbrowser" VALUE="1">
   <PARAM NAME="cabbase" VALUE="filetransfer.cab">
  <p><INPUT onclick="document.fileupload.startUpload();" type="button" value="Start Upload"></p>

A note of caution when using ASP.NET

If you are using ASP.NET and want to use a button on the page to trigger JFile's upload, you should not use a server-side button, either Web control or HTML control set to run at server. You cannot use either of the following:

<INPUT type="button" value="Start Upload" id="button2" name="button2" runat="server">
<asp:Button id="button3" runat="server" Text="Start Upload"></asp:Button>

While it is possible to set server-side button to execute a client-side JavaScript event, this will not work properly with JFile. When you use a server-side button, the JavaScript will run first and JFile will begin posting the files to the specified page on the server. Immediately after JFile has begun the transfer process, the page will then post back to itself to run the server-side event that the button triggered. This causes JFile to be unloaded from memory and the file transfer to be cancelled. In effect, the page is being posted twice, once by JFile and once by the server-side ASP.NET event, which is obviously not what we want to occur.

Created : 8/25/2004 3:09:58 PM (last modified : 8/25/2004 4:03:59 PM)
Rate this article!