Example uploadify using forms
This entry was posted on May 19 2009
Ok so here is the complete sample code for using forms with uploadify. Firstly it would be good for you to have the basic demo working and your will have to change the links to the js css and upload.php to suit your paths. in the example upload.php i am basically showing you how to return errors and the full list of get variables posted from the form. You will obviously need to include the right upload.php found on the uploadify web site. you can then just use $_GET['input_name'] to action any of your form fields.
form.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="uploadify/jquery-1.3.2.min.js"></script>
<link rel="stylesheet" href="uploadify/uploadify.css" type="text/css" />
<script type="text/javascript" src="uploadify/jquery.uploadify.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#fileUpload").fileUpload({
'uploader': 'uploadify/uploader.swf',
'cancelImg': 'uploadify/cancel.png',
'script': 'upload.php',
'folder': 'files',
'multi': true,
'buttonText': 'Select Files',
'checkScript': 'uploadify/check.php',
'displayData': 'speed',
'simUploadLimit': 1,
'onComplete': function(a, b, c, d, e){ alert(d);},
'onAllComplete': function(event,data){
//something here
}
});
});
</script>
<script type="text/javascript">
function startUpload(id){
var queryString = '&' + $('#new_doc_upload').serialize();
$('#fileUpload').fileUploadSettings('scriptData',queryString);
$('#fileUpload').fileUploadStart();
}
</script>
</head>
<body>
<form id="new_doc_upload" method="get">
<div id="fileUpload">You have a problem with your javascript</div>
<a href="javascript:startUpload('fileUpload')">Start Upload</a> | <a href="javascript:$('#fileUpload').fileUploadClearQueue()">Clear Queue</a>
<p></p>
Your name <input type="text" name="yourname" /><br />
Your comment <textarea name="yourcomment"></textarea>
</form>
</body>
</html>
upload.php
<?php
if (!empty($_FILES)) {
$tempFile = $_FILES['Filedata']['tmp_name'];
print_r($_GET);
switch ($_FILES['Filedata']['error'])
{
case 0:
//$msg = "No Error (" . print_r($_GET) .")"; // comment this out if you don't want a message to appear on success.
break;
case 1:
$msg = "The file is bigger than this PHP installation allows";
break;
case 2:
$msg = "The file is bigger than this form allows";
break;
case 3:
$msg = "Only part of the file was uploaded";
break;
case 4:
$msg = "No file was uploaded";
break;
case 6:
$msg = "Missing a temporary folder";
break;
case 7:
$msg = "Failed to write file to disk";
break;
case 8:
$msg = "File upload stopped by extension";
break;
default:
$msg = "unknown error ".$_FILES['Filedata']['error'];
break;
}
If ($msg)
$stringData = "Error: ".$_FILES['Filedata']['error']." Error Info: ".$msg;
else
$stringData = "1"; // This is required for onComplete to fire on Mac OSX
echo $stringData;
}
//echo "1";
?>
I have yet to find an example anywhere that demonstrations how to make uploadify behave like a traditional upload form. There is an issue of state and session variables and form feedback that does not seem to be address in any examples out there.
I find jquery confusing and don’t get it. That said I want to integrate into my current PHP / MySQL apps.
For instance, in my app I traditionally check that a use has entered a valid email, name and other information serverside and return a message if they have not done so. I do this all server side. Sometimes I use basic javascript. With uploadify I have yet to figure out how to do this. If fact I don’t want the upload to occur until the user has enter the correct information.
What would really be useful for me and perhaps others would be an example of how to integrate Uploadify into an exisiting app. Where data is checked with user feedbas before upload is permitted.
Actually, I found this confusing as well when I first started integrating it with a project. If your primary concern is validation, you can do this 2 ways:
1. Add a JS event to the submit button, and pre-validate with JS.
2. On the actual “upload” script do post validation with the submitted info (scriptData object, look at documentation). You can do all the validation you need/want on the PHP end and pass back either codes (to interpret with JS and display nicely on the form) or simply an error message.
There are probably other ways to address validation, but these are the most commonly used. In my situation not only did I have a number of validations to make, but directory structure creation, permission setting, and to work
around the session issue (sessions are ignored on the upload script/flash connection) I even had to pass an encrypted session ID via the request object.
It will integrate with whatever you throw at it – you just have to make it work for you.
In your case.. just to add (sorry for the double post):
Examine the startUpload() function above. You would add your validation to this function, and return false on error. You could also append some info a field/div. That would prevent a user from uploading without valid info (but as always, you must include proper server-side validation)