Demos

Upload Editor

This demo shows how to

• configure the uploader editor component
• configure the cell editors
• configure the server-side actions for insert, update and delete operations
• use custom data validators

The complete list of the uploader options is available in the documentation available in the purchased package.
Note that is a live demo and your tests will be recorded in a database!

Instructions: Double-click on the Photo or File cell or press enter key to open the inline uploader editor.

Configuration object and Uploader object:

	//ezEditTable configuration object			
	var demoConfig = {
		editable: true,
		default_selection: 'both',
    	editor_model: 'cell',
		
		cell_editors:[
			{ 
				type: 'uploader', 
				uploader: { uri: 'php/uploadFile.php', path: 'images/uploads/', max_file_size: '51200', show_link: false }
			},
			{ type: 'input', attributes:[['title', 'First name and last name']] },
			{ type: 'input', attributes:[['title', 'email address']] },
			{ type: 'none' },
			{ type: 'input', attributes:[['maxLength', 10], ['title', '10 digits max.\n numbers with 2 decimal places only']], css:'alignRight' },
			{ 
				type: 'uploader', 
				uploader: { 
					uri: 'php/uploadFile.php', path: 'images/uploads/',  
					valid_extensions: 'pdf,doc,docx,htm,html,txt', sql_field: 'FILENAME'
				}
			},
			{ type: 'boolean' }
		],
		
		actions:{
			'update': { 
				uri: 'php/employeeUpdate.php', submit_method: 'form', form_method: 'POST', 
				param_names: ['','name','email','startdate','salary','','active']
			},
			'insert': { 
				uri: 'php/employeeInsert.php', submit_method: 'form', form_method: 'POST', 
				param_names: ['','name','email','startdate','salary','','active'],
				default_record: [
					'<img class="icnImg" alt="" src="images/icn_cross.png">', 
					'Employee name...', 'employee@email.com', '2012-01-01', '0.00', '',
					'<input type="checkbox" checked>'
				]
			},
			'delete': { 
				uri: 'php/script.deleteEmployee.php', submit_method: 'script', bulk_delete: false,
				param_names: ['']
			}
		},

		//Data validation delegate, the script does not provide data validation tools
		validate_modified_value: function(o, colIndex, oldVal, newVal, cell, editor){
			if(colIndex==3 && oldVal != newVal){ 
				if(!et_ValidateEmail(newVal)){
					alert('Please insert a valid email!'); 
					return false;
				} else return true;
			}
			else if(colIndex == 5 && oldVal != newVal){
				if(!et_IsNumber(newVal)){
					alert('Please insert a valid number with 2 decimal places!');
					return false;
				} else return true;
			}
			else return true;
		}
	};

	//Validation functions
	function et_ValidateEmail(email){
		var reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
		return reg.test(email);
	}
	
	function et_IsNumber(val){
		var isPrice = /^\d+\.\d{2}$/;
		return isPrice.test(val);
	}
		

Upload operation (uploadFile.php)

	if ($_FILES['UPL_FILE']['error'] > 0){ 
		echo "An error occured!";
		return;
	}
	
	if(isset($_POST['MAX_FILE_SIZE']) && isset($_POST['RECORD_KEY']) && isset($_POST['IMAGES_FOLDER_PATH']) && $_FILES['UPL_FILE']['size'] > 0)
	{
		$id = $_POST['RECORD_KEY'];
		$filename = $_FILES['UPL_FILE']['name'];
		$tmpname  = $_FILES['UPL_FILE']['tmp_name'];
		$filesize = $_FILES['UPL_FILE']['size'];
		$fieldname = isset($_POST['SQL_FIELD']) ? $_POST['SQL_FIELD'] : "IMAGENAME" ;
		$maxfilesize = $_POST['MAX_FILE_SIZE'];
		$imgfolder = $_POST['IMAGES_FOLDER_PATH'];
		$allowed_extensions = $_POST['VALID_EXTENSIONS'];
		$allowed_extensions = str_replace(" ", "", $allowed_extensions);
		$valid_extensions = explode(",", $allowed_extensions);
		$fileext = strtolower(  substr(  strrchr($filename, '.')  ,1)  );
		$jscode = stripslashes($_POST['JS_CODE']);

		if($filesize > $maxfilesize){
			echo $filename." exceeds the maximum file size allowed (50Kb).";
			return;
		} else { 
			if( in_array($fileext, $valid_extensions) ){
				
				$ip = isset($_SERVER['HTTP_X_FORWARDED_FOR']) ? $_SERVER['HTTP_X_FORWARDED_FOR'] : $_SERVER['REMOTE_ADDR'];
				$uploadfilename = $id."_".$filename;
				$filemoved = move_uploaded_file($tmpname, "../".$imgfolder.$uploadfilename);
				
				if($filemoved == 1){
					connect_db();
					$query = "UPDATE ".TBL_DEMO_EMPLOYEE." SET ".
							"$fieldname='$uploadfilename',MODIP='$ip',MODDATE=NOW()".
							"WHERE ID='$id'";
					mysql_query($query);
					close_db();
				
					echo $filename." successfully uploaded.";
					echo str_replace("{0}", stripslashes($uploadfilename), $jscode);
					return;
				} else {
					echo $filename." could not be uploaded. Please try again.";
					return;	
				}
				
			} else {
				echo $fileext." file extension not allowed.";
				return;
			}
		}
		
		
	} else {
		echo "File not found!";
		return;
	}	
	

---

Top of page