How to upload a file with LiveCode Server
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>
Malte
Hi,
Thanks for this tutorial!
it seems the file is stored in /tmp
My questions are, is it ensured the engine has writing permissions ther? How long does the file live there? Is it cleared, after the script finished executing?
All the best,
Malte
Elanor Buchanan
Hi Malte
By default the engine should have write permissions to /tmp but this is not ensured, if you want to check you can try writing there and checking the result.
When the engine finishes executing it will clean up any files it thinks it owns. If the engine crashes it will try to clean up the files the next time it is run.
I hope that helps.
Kind regards
Elanor
Jean Marc
Hi from France!
Thank you for your great help.
I save the successfully uploaded file with
get shell ("mv" && tFilePath && "~/public_html/" & tFileName)
mv is for move.
All the best too.
Jean marc
Christopher Flatt
I use the following to move the temporary file where I want it to reside:
put $_Files[content][name] into tFileName
put $_Files[content][type] into tFileType
put $_Files[content][size] into tFileSize
put $_Files[content][filename] into tFilePath
put url("binfile:" & tFilePath) into url("binfile:../path-relative-to-form/& tFileName)
Hope this helps.