revUp - Updates and news for the LiveCode community
Issue 142 | October 19th 2012 Contact the Editor | How to Contribute

Upload a File with LiveCode Server
Following our theme this week of server related issues, this is a useful lesson

by Ben Beaumont

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, www.on-rev.com is provided by RunRev 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.

<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:

1) 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.
2) action = "": 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.
3) 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.

Add the LiveCode Script to check for the uploaded file

<?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>

1) Copy the above script into a new LC file and change the action to the name of your file.
2) Upload it to your server.
3) Open a browser and navigate to your file.
4) Click 'choose file' and select any file from your local system.
5) Wait for it to upload.
6) Presto, 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).

NOTE: 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.
NOTE: 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.

<?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>

About the Author

Ben Beaumont is Product Manager for RunRev Ltd.

 

Main Menu

What's New


Get Power Up Bundle Before its Gone