In this example we look at how to use LiveCode server to upload a file. You'll need web server with LiveCode Server in order to follow along with this lesson. If you need hosting, http://www.on-rev.com is provided by Livecode Ltd and is pre configured with the latest LiveCode Server engines.
Create the basic HTML form[]
We need to start by creating a web form that lets the user select a file form their computer and 'post' this information to the server. This is form.html:
<html>
<head></head>
<body>
<H1>Upload Form</H1>
<form enctype="multipart/form-data" action="file_upload_example.lc" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
</body>
</html>
A few key things to point out:
- enctype = "multipart/form-data": This tells the browser that the form is going to pass multipart data which is what we have to set if we're going to upload files.
- action = "file_upload_example.lc": You'll see in the example that the action is a LiveCode file. This is where the form will post its data too and where our script to handle the upload should go. We still need to write it, see below.
- name="uploadedfile": You'll notice that we've created a 'input' form element with the name 'uploadedfile'. The file data will appear in the $_Files array under that key.
Create the livecode script[]
Add the LiveCode Script to check for the uploaded file, this is file_upload_example.lc:
<?lc
set the errorMode to "inline"
?>
<html>
<head></head>
<body>
<H1>Upload Form</H1>
<form enctype="multipart/form-data" action="file_upload_example.lc" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
<H1>Uploaded Files</H1>
<p>
<?lc
if $_Files[uploadedfile][error] then
put "There was an error uploading your file:" && $_Files[uploadedfile][error] & "<br />"
else
put $_Files[uploadedfile][name] into tFileName
put $_Files[uploadedfile][type] into tFileType
put $_Files[uploadedfile][size] into tFileSize
put $_Files[uploadedfile][filename] into tFilePath
put "Your file '" & tFileName & "' was uploaded successfully. It is" && tFileSize && "bytes in size."
end if
?>
</p>
</body>
</html>
- Upload it to your server.
- Open a browser and navigate to your file.
- Click 'choose file' and select any file from your local system.
- Wait for it to upload.
- It should display the name and size of the uploaded file.
You'll notice we've added a little extra HTML header 'Uploaded Files' under which we are displaying the information from our upload ($_FILES).
Notice that all the information, including errors are stored in the $_FILES array against a key with the same name as our input box (uploadedfile) in the web form.
You can access the name, type, size and path of the uploaded file via the $_FILES array.
Do something with the file[]
In this step I've added code which displays the content of the file if it is found to be a 'text' file. This information is available in the $_FILES array. This is file_upload_example.lc (advanced version):
<?lc
set the errorMode to "inline"
?>
<html>
<head></head>
<body>
<H1>Upload Form</H1>
<form enctype="multipart/form-data" action="file_upload_example.lc" method="POST">
Choose a file to upload: <input name="uploadedfile" type="file" /><br />
<input type="submit" value="Upload File" />
</form>
<H1>Uploaded Files</H1>
<p>
<?lc
if $_Files[uploadedfile][error] then
put "There was an error uploading your file:" && $_Files[uploadedfile][error] & "<br />"
else
put $_Files[uploadedfile][name] into tFileName
put $_Files[uploadedfile][type] into tFileType
put $_Files[uploadedfile][size] into tFileSize
put $_Files[uploadedfile][filename] into tFilePath
put "Your file '" & tFileName & "' was uploaded successfully. It is" && tFileSize && "bytes in size."
// If the file is a text file, the display what is in the file
if tFileType is "text/plain" then
put URL ("file:" & tFilePath) into tText
put "<h1>File Content</h1><p>" & tText & "</p>"
end if
end if
?>
</p>
</body>
</html>
