My Implemenation! Woohoo!

rallport

Hi,

After getting the thing to work (there was typo in the link to the js file - doh!) I implemted this into a small internal project management system we use at work (users upload a file before adding a comment). Users can comment of projects and need to attach one or multiple files (or none obv.) to a comment. So when a user views a comment there will be a link to the file to download. Sounds simple, but yesterday I was at my wits end trying to get this script to work.

I'm aware it's not as advanced as some showcased here, but I thought my example may help others - as I imagine associating a file with a certain item is quite common. Also, until I read quite a few threads the below wasn't immediately obvious.

Firslty, here's the index page code:


<?php session_start();
$_SESSION['COMMENT_ID'] = '33';
?>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<link rel=\"stylesheet\" type=\"text/css\" href=\"css/uploadify.css\" />
<script type=\"text/javascript\" src=\"js/jquery-1.3.2.min.js\"></script>
<script type=\"text/javascript\" src=\"js/jquery.uploadify.js\"></script>
<script type=\"text/javascript\">
$(document).ready(function() {
	$('#theuploadfield').fileUpload({
		'uploader': 'flash/uploader.swf',
		'script': 'upload.php',
		'folder': './uploads',
		'displayData': 'percentage',
		'buttonText': 'Choose File(s)',
		'buttonImg':'img/butupload.gif',
		'width': 172,
		'height': 84,
		'multi': true,
		'scriptData': {'COMMENT_ID': '<?php echo $_SESSION['COMMENT_ID']; ?>'},
		'cancelImg': 'img/cancel.png'
	});
	
});
</script>
<title>Upload test</title>
</head>
<body>

<input type=\"file\" id=\"theuploadfield\" name=\"theuploadfield\" /><br />
	<div id=\"toolbar\">
        <img src=\"img/add.png\" alt=\"Add\" class=\"aligned\" /> <a href=\"javascript:$('#theuploadfield').fileUploadStart();\">Upload Files</a> |
        <img src=\"img/cancel_all.png\" alt=\"Cancel\" class=\"aligned\" /> <a href=\"javascript:$('#theuploadfield').fileUploadClearQueue();\">Clear Queue</a>
  	</div>
</body>
</html>

The scriptData is simply meant as an example here. In the production system the script data would be the comment ID that I would get and set via a database query, here i have simply set a static number.

Have amended the upload.php slightly to insert the file name, file extension, upload date and comment id into a table (I'm using a simple database class I wrote to mnimize the amount of code I written). To get the script data variables I used php's GET function as the script data is sent via the get method.


<?php
require(\"classes/db.class.php\");

if (!empty($_FILES)) {
	$tempFile = $_FILES['Filedata']['tmp_name'];
	$ext = strtolower(substr($_FILES['Filedata']['name'], strrpos($_FILES['Filedata']['name'], '.') + 1));
	//$filename = md5(basename($_FILES['Filedata']['tmp_name'])).'.'.$ext;
	$targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
	$targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
	
        //upload
	move_uploaded_file($tempFile,$targetFile);
	
	$thefilename = $_FILES['Filedata']['name'];
	
	//assign script data to a variable
	$theID = $_GET['COMMENT_ID'];

        //save file to db
	$db = new mysqldb();
	$db->select_db();
		$sql = sprintf(\"INSERT INTO rob_files (fileName, fileExtension, DateTimeUploaded, CommentID) VALUES ('%s','%s', NOW(), '%s')\",
						mysql_real_escape_string($thefilename),
						mysql_real_escape_string($ext),
						mysql_real_escape_string($theID) 
					);  
	$result = $db->query($sql);
	$db->kill();
}

//Would un-set the session here usually, but need to use the comment id for when a user actually posts the comment.
//unset($_SESSION['COMMENT_ID']);
echo \"1\";
?>

That's it really, only other thing i did was use a nice php directory indexer for the uploads directory:

Here's what the saved data looks like (ignore the blank dates I was testing then):

I want to display a confirmation message after uploading E.g. "3 files uploaded!", but can't figure it out, if anyone could make some suggestions it would be great

Nicte

I want to display a confirmation message after uploading E.g. "3 files uploaded!", but can't figure it out, if anyone could make some suggestions it would be great

Use 'on Complete' or 'onAllComplete' to show a div that contains the message you would like to show. Something like this (beeing 'fileUploaded' the id of your div):

onComplete   : function(event, queueID, fileObj, reposnse, data) {
          document.getElementById('fileUploaded').style.display = 'block';
        }

Nicte

RonnieSan

You can also do a really cool message that flashes then fades:


onComplete   : function(event, queueID, fileObj, response, data) {
                         $('#fileUploaded').html(data.filesUploaded + ' files were successfully uploaded.');
                         $('#fileUploaded').show().animate({'display':'block'},3000).hide(500);
                       }

fileUploaded would be the id of the success message.

tomreno

rallport,

That directory lister you have looks really nice - would you mind sharing?

rallport

tomreno said:
rallport,

That directory lister you have looks really nice - would you mind sharing?

Sure, http://www.celerondude.com/php-indexer

Just drop the index.php into the directory and away you go

archieboi

Hi.. I did try to see if it is really working but the thing is that the files are uploaded to the directory but not in the database.. this is my code:
Please help. thanks in advance...

<?php
// Uploadify v1.6.2
// Copyright (C) 2009 by Ronnie Garcia
// Co-developed by Travis Nickels
include('config/config.php');
if (!empty($_FILES)) {
   $tempFile = $_FILES['Filedata']['tmp_name'];
   $targetPath = $_SERVER['DOCUMENT_ROOT'] . $_GET['folder'] . '/';
   $targetFile =  str_replace('//','/',$targetPath) . $_FILES['Filedata']['name'];
   
   //upload
   move_uploaded_file($tempFile,$targetFile);
   
   $thefilename = $_FILES['Filedata']['name'];
  
 //save file to db
 $sql = sprintf("INSERT INTO tblrequisition (rs_file) VALUES ('%s')", mysql_real_escape_string($thefilename)); 
 $query = mysql_query($sql);
}
echo "1";
?>

producerism

nice, I may implement something similar, now that I've seen how nice it looks

One suggestion - I see you are simply looking for a period in the filename to determine the extension. For a filenames like "timesheet-5.22.10.zip," this would cause a problem. A better solution would be to use the php pathinfo function:

$ext = pathinfo($filename, PATHINFO_EXTENSION);

Otherwise, nice and clean implementation!

huaxia

There a few things, which you must remember Pandora UK when engaging into such business. When you chamilia charms sell diamond jewelry, a seller ultimately chamilia beads banks on the beauty of diamonds. That genuine pandora charms means, when selling them, you must pandora bracelets make sure that it is still as beautiful pandora canada as it was when you first bought it. So chamilia to make sure that you can sell it pandora bracelets for its real value, be sure to have it pandora australia cleaned first to recover its former beauty. The lovelinks pieces of jewelry come in various designs.Christian chamilia crosses can also be great gifts because pandora schmuck this can be appropriate for any occasion that you are pandora armband celebrating. If you're giving this as a gift to pandora armbänder your partner, you can make it more special by pandora charms having your initials engraved on it. The best part is, it's not as pandora australia pricey as you think.

zk_phpfan

Thank you very much,that helps a lot :D; hehe

Howdy, Stranger!

Categories