Jump to content

YUI Uploader Help


savagenoob

Recommended Posts

Im trying to get Yahoos YUI uploader to work in my website, I have all the javascript working correctly but dont know how to recieve and process the file on upload.php. Here is the javascript:

<style type="text/css"> 
.uploadButton a, .clearButton a {
	display:block;
	width:100px;
	height:40px;
	text-decoration: none;
	margin-left:5px;
}

.uploadButton a {
	background: url("images/uploadFileButton.png") 0 0 no-repeat;
}

.clearButton a {
	background: url("images/clearListButton.png") 0 0 no-repeat;
}

    .uploadButton a:visited, .clearButton a:visited {
	background-position: 0 0;
}

    .uploadButton a:hover, .clearButton a:hover {	
	background-position: 0 -40px;
}

    .uploadButton a:active, .clearButton a:active {
	background-position: 0 -80px;
}
</style>

<div>
<div id="fileProgress" style="border: black 1px solid; width:300px; height:40px;float:left">
	<div id="fileName" style="text-align:center; margin:5px; font-size:15px; width:290px; height:25px; overflow:hidden"></div>
	<div id="progressBar" style="width:300px;height:5px;background-color:#CCCCCC"></div>
</div>
<div id="uploaderUI" style="width:100px;height:40px;margin-left:5px;float:left"></div>
<div class="uploadButton" style="float:left"><a class="rolloverButton" href="#" onClick="upload(); return false;"></a></div>
<div class="clearButton" style="float:left"><a class="rolloverButton" href="#" onClick="handleClearFiles(); return false;"></a></div>
</div>


<script type="text/javascript"> 
    
    // Instantiate the uploader and write it to its placeholder div.

YAHOO.widget.Uploader.SWFURL = "images/uploader.swf";

var uploader = new YAHOO.widget.Uploader( "uploaderUI", "images/selectFileButton.png" );

// Add event listeners to various events on the uploader.
// Methods on the uploader should only be called once the 
// contentReady event has fired.

uploader.addListener('contentReady', handleContentReady);
uploader.addListener('fileSelect',onFileSelect)
uploader.addListener('uploadStart',onUploadStart);
uploader.addListener('uploadProgress',onUploadProgress);
uploader.addListener('uploadCancel',onUploadCancel);
uploader.addListener('uploadComplete',onUploadComplete);
uploader.addListener('uploadCompleteData',onUploadResponse);
uploader.addListener('uploadError', onUploadError);
    	
    // Variable for holding the selected file ID.
var fileID;

function handleClearFiles() {
uploader.clearFileList();
uploader.enable();
fileID = null;

var filename = document.getElementById("fileName");
filename.innerHTML = "";

var progressbar = document.getElementById("progressBar");
progressbar.innerHTML = "";
}

// When contentReady event is fired, you can call methods on the uploader.
function handleContentReady () {
    // Allows the uploader to send log messages to trace, as well as to YAHOO.log
	uploader.setAllowLogging(true);

	// Restrict selection to a single file (that's what it is by default,
	// just demonstrating how).
	uploader.setAllowMultipleFiles(false);

	// New set of file filters.
var ff = new Array({description:"Images", extensions:"*.jpg;*.png;*.gif"},
	                   {description:"Videos", extensions:"*.avi;*.mov;*.mpg"},
					   {description:"Files", extensions:"*.pdf; *rtf; *.doc; *.docx, *.xls"}); 
	// Apply new set of file filters to the uploader.
	uploader.setFileFilters(ff);
}

// Initiate the file upload. Since there's only one file, 
// we can use either upload() or uploadAll() call. fileList 
// needs to have been populated by the user.
function upload() {
if (fileID != null) {
	uploader.upload(fileID, "upload.php?clientid=<?php echo $ClientID; ?>");
	fileID = null;
}
}

// Fired when the user selects files in the "Browse" dialog
// and clicks "Ok".
function onFileSelect(event) {
	for (var item in event.fileList) {
	    if(YAHOO.lang.hasOwnProperty(event.fileList, item)) {
			YAHOO.log(event.fileList[item].id);
			fileID = event.fileList[item].id;
		}
	}
	uploader.disable();

	var filename = document.getElementById("fileName");
	filename.innerHTML = event.fileList[fileID].name;

	var progressbar = document.getElementById("progressBar");
	progressbar.innerHTML = "";
}

    // Do something on each file's upload start.
function onUploadStart(event) {

}

// Do something on each file's upload progress event.
function onUploadProgress(event) {
	prog = Math.round(300*(event["bytesLoaded"]/event["bytesTotal"]));
  	progbar = "<div style=\"background-color: #f00; height: 5px; width: " + prog + "px\"/>";

	var progressbar = document.getElementById("progressBar");
	progressbar.innerHTML = progbar;
}

// Do something when each file's upload is complete.
function onUploadComplete(event) {
	uploader.clearFileList();
	uploader.enable();

	progbar = "<div style=\"background-color: #f00; height: 5px; width: 300px\"/>";
	var progressbar = document.getElementById("progressBar");
	progressbar.innerHTML = progbar;
}

// Do something if a file upload throws an error.
// (When uploadAll() is used, the Uploader will
// attempt to continue uploading.
function onUploadError(event) {

}

// Do something if an upload is cancelled.
function onUploadCancel(event) {

}

// Do something when data is received back from the server.
function onUploadResponse(event) {
	YAHOO.log("Server response received.");
}

</script>

and here is upload.php as it is, it actually creates the database entry but empty with the client id...

<?php
require_once('config.php');
//Array to store validation errors
$errmsg_arr = array();

//Validation error flag
$errflag = false;

//Connect to mysql server
$link = mysql_connect(DB_HOST, DB_USER, DB_PASSWORD);
if(!$link) {
	die('Failed to connect to server: ' . mysql_error());
}

//Select database
$db = mysql_select_db(DB_DATABASE);
if(!$db) {
	die("Unable to select database");
}
$fileName = $_FILES['RemoteFile']['name'];
$tmpName  = $_FILES['RemoteFile']['tmp_name'];
$fileSize = $_FILES['RemoteFile']['size'];
$fileType = $_FILES['RemoteFile']['type'];

$File = preg_replace("/[&'_ ]/","",$fileName); // strip whitespace and special characters
$data = addslashes(fread(fopen($File, "r"), filesize($File)));

$fp      = fopen($tmpName, 'r');
$content = fread($fp, filesize($tmpName));
$content = addslashes($content);
fclose($fp);
$ClientID = $_REQUEST['clientid'];

$query = "INSERT INTO upload (name, size, type, content, ClientID) ".
"VALUES ('$File', '$fileSize', '$fileType', '$content', '$ClientID')";

$result = mysql_query($query); 
echo mysql_error();
echo "<meta http-equiv=Refresh content=0;url=client.php?ID=$ClientID>";
?>

Link to comment
https://forums.phpfreaks.com/topic/174958-yui-uploader-help/
Share on other sites

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.