Have you ever wanted to upload your files to your hosting, or have you ever want to make a simple images gallery and let the visitors upload their pictures.
In this tutorial I will show you how simple is to write a script for uploading your files online with no need for complicated web scripts like ASP or PHP.
Simple HTML uploading form
If you want to upload images you will need a form, it is made in pure HTML, it is the page where you click on Browse and select the file you want to upload. Fortunately HTML provides us with the elements, we do not need to write scripts to list files on our computer.
<head>
<title>Upload an Image</title>
</head>
<body bgcolor=”#ffffff” leftmargin=”0” topmargin=”0” marginwidth=”0” marginheight=”0”>
<form action=”upload.wbsp” method=”post” ENCTYPE=”multipart/form-data”>
Select file (*.jpg;*.gif – max. 100KB): <input type=”file” name=”image” size=”20”> <input type=”submit” name=”sButt” value=”Upload”>
</form>
</body>
</html>
Let take a look in some important elements in this code, first the Form tag, without it our code will not work, the form tag must contain information like action (where to send the file data), method (there is two general methods – get and post, when sending files use post) and enctype(there is a lot of encoding types, multipart/form-data is used for uploading files).
Also we need to use the input of type file, that input is the one which let us browse our computer files. Last is the submit input, it is the button which people will click to send or upload the file.
Save this file as index.htm and put it in a folder so you do not loose it.
The butter of the work
Now we want to make the server-side file, it is the script which takes the file, save it on the hosting server.
WB_AllowMultipart=T
[Upload]
WB_Disallow=![jpg,gif,png,bmp]
WB_UploadDir=/
WB_Overwrite=T
WB_MaxFSize=102400
<!–WB_BeginTemplate–>
<html>
<head>
<title&rt;File uploaded</title>
</head>
<body bgcolor=”#ffffff” leftmargin=”0” topmargin=”0” marginwidth=”0” marginheight=”0”>
Your file have been uploaded!
</body>
</html>
OK, do not get afraid, it is not complicated as it seems, I will explain every line before the HTML tag, make your self a coffee or a tea and sit down and read.
I will explain first what is used as a scripting language, it is WhizBase Server Pages, WhizBase is simple but powerful scripting language, it is made for non-programmers to simplify creating database-driven websites without the need for high experience in high-level programming languages.
Now in English, it is a scripting language for everyone, simple and easy for you to use. Let me show you how.
The header section
Every WBSP page have a header, it is a place where we put some information needed by the server, everything we write in this section will not appear in our page. This section contains the variables that are essential for processing WBSP file. Here you put information about the database, recordset, template, error template, log file, redirection, etc.
In the code we have [FormFields] which is a tag giving a notice for WhizBase engine to start interpreting the main commands of the WBSP file.
Then we have WB_AllowMultipart = T this variable controls if the current WBSP page will accept uploaded files (sent by client using multipart form). If this variable is set to TRUE WhizBase will accept and process uploaded files. This is a security measure so WBSP process the files sent to the write direction.
Second tag is [Upload] which is giving a notice for WBSP engine to start receiving information about the uploading process. Now ask your self, do you want viruses and a porn dialer on your server, if no you need to use WB_Disallow=![jpg,gif,png,bmp], we do not want users to upload any file, we only want images, so we disallow every file which does not have one of these extensions.
Where do you want to put your pictures, you need an upload directory, so we use WB_UploadDir=/, this variable defines the name of the directory on the server where WhizBase will save files uploaded using current WBSP file.
Do you want to overwrite your image? WB_Overwrite=T is a variable which defines if the file with same name that already exists on the server will be overwritten by newly uploaded file. We will use T as True. If you define it as F (False) WhizBase will generate a unique file name for the new one and save it like that.
If you do not want visitors to block your server, you need to limit their file's upload size, so you use WB_MaxFSize=102400 which is a variable which defines the maximum size (in bytes) of a single file that can be uploaded using current WBSP file. We have putted 102400 bytes.
Finally we put <!–WB_BeginTemplate–> to let the server know that now we are starting the body section, where we put our HTML code and what we want to show for visitors.
As you see, we can control everything when uploading files. And that how you simply make an upload form which works without the need of PHP or ASP.
For more information about WhizBase please visit WhizBase site or contact me on NurAzije [at] Gmail [dot] com.