FtpTree HTML Web Tutorial

This is a simple tutorial on how to use FtpTree Active X using a webpage. Below you will find a code sample of the basic HTML used to create your online FTP client.

Go to:

Basic HTML

First, you should start out with basic HTML code like you would use in a typical webpage. This example uses a table to organize the form fields and the object window side by side. It is personal preference on how you would like to layout the final webpage.



<HTML><HEAD></HEAD>
<BODY>
<CENTER>
<TABLE border=2>
<TR>
<TD>

Coding FtpTree Active X --Object

To embed the Active X control into your webpage you will need to set the object properties using the object tags like the example below. You can specify how large you would like the FtpTree remote files window to be by setting the height and width properties. In order for the control to work properly you need to reference the "FtpTree.cab" file. In this example the "FtpTree.cab" file has been placed in the same directory as the webpage.


<OBJECT id=FtpTree1 style="LEFT: 0px; TOP: 0px"
codeBase=FtpTree.cab version=10,0,0,0 height=391 width=247
classid=CLSID:C22877C3-4214-11D0-B0DA-080009C351D7 VIEWASTEXT>

Setting FtpTree Properties

The next step is to set the properties for the FtpTree control. This can be done by setting the "NAME" and "VALUE" properties inside the "PARAM" tag like in the examples below. Please note that some properties may need to be set by the person using the webpage. This is done by using the form fields which will be covered later. Be sure to close the "OBJECT" tag (</OBJECT>) after all the parameters have been set. All of the FtpTree properties and their descriptions can be found here.


<PARAM NAME="BorderStyle" VALUE="1">
<PARAM NAME="Enabled" VALUE="-1">
<PARAM NAME="Appearance" VALUE="0">
<PARAM NAME="FtpSite" VALUE="">
<PARAM NAME="DefaultDirectory" VALUE="/">
<PARAM NAME="PASV" VALUE="0">
<PARAM NAME="Port" VALUE="21">
<PARAM NAME="HidePeriodFiles" VALUE="-1">
<PARAM NAME="HideStartingWith" VALUE="0">
<PARAM NAME="ConnectionAttempts" VALUE="1">
<PARAM NAME="TrackSelect" VALUE="0">
<PARAM NAME="AutoUpload" VALUE="0">
<PARAM NAME="LinesAtRoot" VALUE="-1">
<PARAM NAME="DisplayErrors" VALUE="-1">
<PARAM NAME="LiteralShortCuts" VALUE="0">
<PARAM NAME="AnonymousPassword" VALUE="">
<PARAM NAME="ListParameter" VALUE="">
<PARAM NAME="UserAtDelim" VALUE="64">
<PARAM NAME="AutoResume" VALUE="0">
<PARAM NAME="FileHourOffset" VALUE="0">
<PARAM NAME="ShowFoldersAboveDefault" VALUE="0">
<PARAM NAME="SyncFoldersInclFilter" VALUE="">
<PARAM NAME="SyncFoldersExclFilter" VALUE="">
<PARAM NAME="SkipVMSVersions" VALUE="-1">
<PARAM NAME="ShortCutFolders" VALUE="">
<PARAM NAME="ShortCutFoldersInsertMode" VALUE="0">
<PARAM NAME="ShortCutDisplayUpdate" VALUE="-1">
<PARAM NAME="UserID" VALUE="anonymous">
<PARAM NAME="Password" VALUE="">
<PARAM NAME="Account" VALUE="">
<PARAM NAME="EncryptedPassword" VALUE="0">
<PARAM NAME="PasswordSecurityMode" VALUE="0">
<PARAM NAME="ConnectionSaver" VALUE="0">
<PARAM NAME="AllowGet" VALUE="-1">
<PARAM NAME="AllowProperties" VALUE="0">
<PARAM NAME="AllowPut" VALUE="0">
<PARAM NAME="AllowRemove" VALUE="0">
<PARAM NAME="AllowCreateDir" VALUE="0">
<PARAM NAME="AllowRemoveDir" VALUE="0">
<PARAM NAME="AllowFileInfo" VALUE="-1">
<PARAM NAME="AllowAbout" VALUE="-1">
<PARAM NAME="AllowRename" VALUE="0">
<PARAM NAME="AllowExplore" VALUE="-1">
<PARAM NAME="AllowView" VALUE="0">
<PARAM NAME="AllowOpen" VALUE="0">
<PARAM NAME="AllowCreateFolderShortCut" VALUE="0">
<PARAM NAME="AllowRemoveFolderShortCut" VALUE="0">
<PARAM NAME="AllowSynchronizeFolders" VALUE="0">
<PARAM NAME="AllowCopyURL" VALUE="0">
<PARAM NAME="ExecuteGet" VALUE="0">
<PARAM NAME="ExecuteOpen" VALUE="0">
<PARAM NAME="ExecutePut" VALUE="0">
<PARAM NAME="ExecuteRemove" VALUE="0">
<PARAM NAME="ExecuteCreateDir" VALUE="0">
<PARAM NAME="ExecuteRemoveDir" VALUE="0">
<PARAM NAME="ExecuteFileInfo" VALUE="0">
<PARAM NAME="ExecuteExplore" VALUE="0">
<PARAM NAME="ExecuteView" VALUE="0">
<PARAM NAME="ExecuteCreateFolderShortCut" VALUE="0">
<PARAM NAME="ExecuteRemoveFolderShortCut" VALUE="0">
<PARAM NAME="ExecuteSynchronizeFolders" VALUE="0">
<PARAM NAME="ShowFiles" VALUE="-1">
<PARAM NAME="ShowFtpSite" VALUE="-1">
<PARAM NAME="ShowSelAlways" VALUE="-1">
<PARAM NAME="UseOpenOnSelChange" VALUE="0">
<PARAM NAME="AllowEditLables" VALUE="0">
<PARAM NAME="AutoBrowse" VALUE="0">
<PARAM NAME="AccessType" VALUE="">
<PARAM NAME="DownloadDirectory" VALUE="\">
<PARAM NAME="UploadDirectory" VALUE="\">
<PARAM NAME="ConnectionTimeout" VALUE="31000">
<PARAM NAME="ConnectionRetries" VALUE="1">
<PARAM NAME="SendTimeout" VALUE="61000">
<PARAM NAME="ReceiveTimeout" VALUE="61000">
<PARAM NAME="KeepAlive" VALUE="-1">
<PARAM NAME="ProxyName" VALUE="">
<PARAM NAME="ProxyUserID" VALUE="">
<PARAM NAME="ProxyPassword" VALUE="">
<PARAM NAME="ProxyPort" VALUE="">
<PARAM NAME="KeepAliveIdleTime" VALUE="3">
<PARAM NAME="ConvertFutureFiles" VALUE="-1">
<PARAM NAME="MaintainDownloadFileTime" VALUE="-1">
<PARAM NAME="MaintainUploadFileTime" VALUE="0">
<PARAM NAME="UseLocalTimeForAnonymous" VALUE="-1">
<PARAM NAME="ConvertFileNamesToLower" VALUE="0">
<PARAM NAME="ConvertFileNamesToUpper" VALUE="0">
<PARAM NAME="ConvertUpperToLower" VALUE="0">
<PARAM NAME="Viewer" VALUE="">
<PARAM NAME="AsciiMode" VALUE="0">
<PARAM NAME="ThoroughLinkResolution" VALUE="-1">
<PARAM NAME="AutoAscii" VALUE="-1">
<PARAM NAME="TextFileExtensions" VALUE=".txt,.text,.htm,.html,.c,.cpp,.h,.hpp,.mak">
<PARAM NAME="GetFileTries" VALUE="0">
<PARAM NAME="PutFileTries" VALUE="0">
<PARAM NAME="MaxDescFileSize" VALUE="20480">
<PARAM NAME="DisableDescFiles" VALUE="-1">
<PARAM NAME="DescriptionFiles" VALUE="">
<PARAM NAME="ConfirmUploadOverwrite" VALUE="-1">
<PARAM NAME="ConfirmDownloadOverwrite" VALUE="-1">
<PARAM NAME="ConfirmAutoUploadOverwrite" VALUE="0">
<PARAM NAME="ConfirmFileDelete" VALUE="-1">
<PARAM NAME="ConfirmFolderDelete" VALUE="-1">
<PARAM NAME="ConfirmFolderShortCutDelete" VALUE="-1">
<PARAM NAME="UploadAutoRename" VALUE="0">
<PARAM NAME="DownloadAutoRename" VALUE="0">
<PARAM NAME="UploadNewerOnly" VALUE="0">
<PARAM NAME="DownloadNewerOnly" VALUE="0">
<PARAM NAME="Licensee" VALUE="">
<PARAM NAME="Product" VALUE="">
<PARAM NAME="RegistrationID" VALUE="">
<PARAM NAME="CleanupTempFiles" VALUE="0">
<PARAM NAME="ConnectSoundFile" VALUE="">
<PARAM NAME="TransferCompleteSoundFile" VALUE="">
<PARAM NAME="DodEntry" VALUE="">
<PARAM NAME="DodUserID" VALUE="">
<PARAM NAME="DodPassword" VALUE="">
<PARAM NAME="DodDomain" VALUE="">
<PARAM NAME="DodCallBackNumber" VALUE="">
<PARAM NAME="DodTries" VALUE="1"></OBJECT>
</TD>

HTML Form Elements

Once you have set all the appropriate properties for the FtpTree Active X control you will need to create a form. The form will be used to get the users information about the site they want to connect to. Some of the information needed to connect to an FTP site would be the site name (eg. ftp.yoursitename.com or IP address to the site), Username and Password. This is the basic information needed to connect to a site. In many cases the user might also be behind a proxy server. In this case you will also need fields to get the users Proxy name, port number and possibly the access type for connecting through their proxy. In the sample below we will just ask for the ftpsite, username and a password. You will also want a submit button to call the connection function once it is pressed. NOTE: The sample HTML page that comes bundled with FtpTree has the proxy support form fields for a reference if needed.


<TD>
<TABLE>
<TR>
<TD>FTP site:</TD>
<TD><INPUT name=ftpsite></TD></TR>
<TR>
<TD>User id:</TD>
<TD><INPUT name=userID></TD></TR>
<TR>
<TD>Password:</TD>
<TD><INPUT name=password></TD></TR>
<TR>
<TD><INPUT type=submit value=Go! name=submit></TD>
<TD></TD></TR></TABLE>

Browser Side VB Connection Function

Once you have created the form you will need to create a function to trigger the connection to your ftp site. In this example we use a browser side VB function. This function will get the information inputed from the form and call the Ftp Tree "NewSession" method using the information from the form.

Please note if you add proxy server connection support to the form you would use that information here to set the FtpTree proxy server properties before calling the "NewSession" method.

This concludes the final step in creating your Web based FTP client. Please take a look at the sample webpage that came bundled with FtpTree.


<SCRIPT language=vbscript>
<!--
sub submit_OnClick()
FtpTree1.AppName = "Test Application"
call FtpTree1.NewSession(ftpsite.value,"",userID.value,password.value)
end sub
</SCRIPT>
</TD></TR></TABLE></CENTER></BODY></HTML>