PageRenderTime 25ms CodeModel.GetById 3ms app.highlight 15ms RepoModel.GetById 1ms app.codeStats 1ms

/web/index.php

http://sfbrowser.googlecode.com/
PHP | 512 lines | 456 code | 50 blank | 6 comment | 24 complexity | a9dcdc7a854aa9bc91732069844478b5 MD5 | raw file
  1<!DOCTYPE html>
  2<html>
  3	<head>
  4		<title>SFBrowser</title>
  5		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6		<link rel="stylesheet" type="text/css" media="screen" href="style/screen.css" />
  7
  8		<!--script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script-->
  9
 10		<!--
 11		<script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
 12		<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
 13		<script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
 14		<script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
 15		<script type="text/javascript" src="scripts/jquery-1.5.2.min.js"></script>
 16		<script type="text/javascript" src="scripts/jquery-1.6b1.js"></script>
 17		-->
 18		<script type="text/javascript" src="scripts/jquery-1.7b2.js"></script>
 19
 20
 21		<?php include("sfbrowser/connectors/php/init.php"); ?>
 22		<script type="text/javascript">
 23
 24			function addFiles(aFiles) {
 25				if ($('#addfiles>ul').length==0) $('#addfiles').html('<ul/>');
 26				for (var i=0;i<aFiles.length;i++) $("#addfiles>ul").append("<li><a onclick=\"$.sfb({select:addFiles,plugins:[],file:'"+aFiles[i].file+"'});\">"+aFiles[i].file+"</a> is "+aFiles[i].size+" <a onclick=\"$(this).parent().remove()\">[x]</a></li>");
 27			}
 28			function addImages(aFiles) {
 29				$.each(aFiles,function(i,o){
 30					$("#addimages").append("<img src=\""+o.file+"\" onclick=\"$(this).remove();\" />");
 31				});
 32			}
 33			$(function(){
 34				var fnTop = function(){$(document).scrollTop(0)};
 35				$("h1").text($.sfbrowser.id+" "+$.sfbrowser.version).click(fnTop);
 36				$("#page tr:odd").addClass("odd");
 37				$("#page tbody>tr").find("td:eq(0)").addClass("property");
 38				var mMenu = $("<ul id=\"menu\" />").appendTo("#header>div");
 39				$("<li><a href=\"#\">SFBrowser</a></li>").appendTo(mMenu).click(fnTop);
 40				$("#page h2").each(function(i,o){
 41					mMenu.append("<li><a href=\"#"+$(this).text()+"\">"+$(this).text()+"</a></li>");
 42					$(this).attr("id",$(this).text());
 43				});
 44
 45				$.sfb({select:addFiles,plugins:['createascii'],swfupload:true,preview:false,bgcolor:'#CEE9F4',bgalpha:.8}); // todo: rem
 46			});
 47			//$(window).load(function() {
 48			//	$.fn.sfbrowser({x:20,y:20,w:700});
 49			//});
 50			// FLATTR code
 51			/* <![CDATA[ */
 52				(function() {
 53					var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
 54					
 55					s.type = 'text/javascript';
 56					s.async = true;
 57					s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
 58					
 59					t.parentNode.insertBefore(s, t);
 60				})();
 61			/* ]]> */
 62
 63		</script>
 64		<script src="http://www.sjeiti.com/ga.js" type="text/javascript"></script>
 65	</head>
 66	<body>
 67		<div id="header">
 68			<div>
 69				<h1><span>SFBrowser</span></h1>
 70				<p style="position:absolute;left:-80px;top:55px;"><a class="FlattrButton" style="display:none;" href="http://sfbrowser.sjeiti.com/"></a></p>
 71			</div>
 72		</div>
 73		<div id="page">
 74			<p><img src="data/screenshot.jpg" align="right" alt="screenshot" />SFBrowser is a file browser and uploader for jQuery. It returns a list of objects with containing the names and additional information of the selected files.<br/>
 75			You can use it, like any open-file-dialog, to select one or more files. Most inherent functionalities are also there like: file upload, file preview, creating folders and renaming or deleting files and folders.<br/>
 76			You can download as <a href="http://code.google.com/p/sfbrowser/downloads">zip</a> or do a <a href="http://sfbrowser.googlecode.com/svn/trunk">repository checkout</a>. If you stumble upon anything out of the ordinary you can <a href="http://code.google.com/p/sfbrowser/issues">file them here</a>.</p>
 77
 78			<p>SFBrowser is also available as a <a href="http://wordpress.org/extend/plugins/sfbrowser/" rel="nofollow">Wordpress plugin</a>.</p>
 79
 80			<h3>features</h3>
 81			<ul>
 82				<li>ajax file upload</li>
 83				<li>optional as3 swf upload (queued multiple uploads, upload progress, upload canceling, selection filtering, size filtering)</li>
 84				<li>localisation (English, Dutch or Spanish)</li>
 85				<li>server side script connector</li>
 86				<li>plugin environment (with filetree and imageresize plugin)</li>
 87				<li>data caching (minimal server communication)</li>
 88				<li>sortable file table</li>
 89				<li>file filtering</li>
 90				<li>file renaming</li>
 91				<li>file duplication</li>
 92				<li>file download</li>
 93				<li>file/folder context menu</li>
 94				<li>file preview (image, audio, video, text/ascii and swf)</li>
 95				<li>folder creation</li>
 96				<li>multiple files selection</li>
 97				<li>inline or overlay window</li>
 98				<li>window dragging and resizing</li>
 99				<li>cookie for size, position and path</li>
100				<li>keyboard shortcuts</li>
101				<li>key file selection</li>
102			</ul>
103
104			<h3>caution</h3>
105			<p>The initial intentions for this filebrowser were for use in a CMS, and those are normally password protected. SFBrowser does try do do things as secure as possible: incoming data is always checked on validity and paths are always compared to the base path set in the server side config file. However: if you intend to use this plugin in an unprotected part of your site you'd do good to doublecheck and test (hack) the server side scripts yourself. You are using this plugin at your own risk.<br/>
106			Should you find holes, leaks or anything else that can be improved <a href="http://code.google.com/p/sfbrowser/issues">report them here</a>.</p>
107
108
109			<h2>installation</h2>
110
111			<p>SFBrowser can (theoretically) be connected to different server side languages. For sake of clarity this document will asume you're running PHP, so when PHP is mentioned further on you can interpret it as every other server side scripting connector. Check the connectors paragraph if you want to use another server side scripting language.</p>
112
113			<ul>
114				<li>adjust 'sfbrowser/connectors/php/config.php' to your needs</li>
115				<li>include the 'sfbrowser/connectors/php/init.php' in the head of the html</li>
116				<li>if not on localhost set the correct chmod of the upload folder and it's contents</li>
117			</ul>
118
119			<h3>configuration file</h3>
120			<p>The 'sfbrowser/connectors/php/config.php' file contains a few basic constants.</p>
121			<table cellpadding="0" cellspacing="0">
122				<thead><tr><th>property</th><th>type</th><th>description</th><th>default</th></tr></thead>
123				<tbody>
124					<tr><td>SFB_PATH</td>			<td>String</td>		<td>path of sfbrowser (relative to the page it is run from)</td><td>"sfbrowser/"</td></tr>
125					<tr><td>SFB_BASE</td>			<td>String</td>		<td>upload folder (relative to <span class="property">SFB_PATH</span>)</td><td>"../data/"</td></tr>
126					<tr><td>SFB_LANG</td>			<td>String</td>		<td>language ISO code</td><td>"en"</td></tr>
127					<tr><td>PREVIEW_BYTES</td>		<td>Integer</td>	<td>ASCII files can be previewed up to a certain amout of bytes.</td><td>600</td></tr>
128					<tr><td>SFB_DENY</td>			<td>String</td>		<td>forbidden file extensions</td><td>"php,php3,phtml"</td></tr>
129					<tr><td>FILETIME</td>			<td>String</td>		<td>datetime format</td><td>"j-n-Y H:i"</td></tr>
130					<tr><td>SFB_ERROR_RETURN</td>	<td>String</td>		<td>return value in case of error</td><td>"&lt;html&gt;&lt;head&gt;&lt;meta http-equiv="Refresh" content="0;URL=http:/" /&gt;&lt;/head&gt;&lt;/html&gt;"</td></tr>
131					<tr><td>SFB_PLUGINS</td>		<td>String</td>		<td>case sensitive, comma separated string with plugin names</td><td>""imageresize,filetree""</td></tr>
132					<tr><td>SFB_DEBUG</td>			<td>Boolean</td>	<td>debug boolean, enables log file and console trace</td><td>false</td></tr>
133				</tbody>
134			</table>
135
136			<h3>localisation</h3>
137			<p>You can easily make SFBrowser into another language. Simply copy one of the existing language po files (sfbrowser/lang/[iso].po and sfbrowser/plugins/[name]/lang/[iso].po) and name them the <a href="http://en.wikipedia.org/wiki/ISO_3166-1_alpha-2#Officially_assigned_code_elements">ISO_3166 code</a> of the new language. Then edit the <span class="property">SFB_LANG</span> constant in 'sfbrowser/connectors/php/config.php' to that ISO code.<br/>
138			Should you make any language file other than the ones already present, I'd be happy to include them in a later release. Please send them to: <a href="mailto:sfbrowser@sjeiti.com">sfbrowser@sjeiti.com</a>.</p>
139
140			<h3>debug</h3>
141			<p>Setting the <span class="property">SFB_DEBUG</span> value will do three things. Setting the value to true will cause inclusion of the uncompressed scripts rather than the minified ones. It will enable tracing in the console window. It will log all server side actions into 'sfbrowser/connectors/php/log.txt'.</p>
142
143
144			<h3 id="javascript">javascript</h3>
145
146			<p>You can call up SFBrowser by '$.fn.sfbrowser();' or the shorter '$.sfb();'</p>
147			<p>SFBrowser has a number of properties you can parse:</p>
148			<table cellpadding="0" cellspacing="0">
149				<thead><tr><th>property</th><th>type</th><th>description</th><th>default</th></tr></thead>
150				<tbody>
151					<tr><td>title</td>	<td>String</td>		<td>title of the SFBrowser window</td><td>"SFBrowser"</td></tr>
152					<tr><td>select</td>	<td>Function</td>	<td>calback function on choose</td><td>function(a,params){trace(a,params)}</td></tr>
153					<tr><td>selectparams</td><td>Object</td><td>optional value to be parsed as the second parameter of the select function</td><td>null</td></tr>
154					<tr><td>selectnum</td><td>Integer</td><td>number of selectable files (0==any)</td><td>0</td></tr>
155					<tr><td>file</td>	<td>String</td>		<td>selected file</td><td>""</td></tr>
156					<tr><td>folder</td>	<td>String</td>		<td>a subfolder (relative to base, to which all returned files are relative)</td><td>""</td></tr>
157					<tr><td>dirs</td>	<td>Boolean</td>	<td>allow visibility and creation/deletion of subdirectories.</td><td>true</td></tr>
158					<tr><td>upload</td>	<td>Boolean</td>	<td>allow upload of files</td><td>true</td></tr>
159					<tr><td>swfupload</td><td>Boolean</td>	<td>use swf uploader instead of form hack</td><td>false</td></tr>
160					<tr><td>allow</td>	<td>Array&lt;String&gt;</td>		<td>allowed file extensions</td><td>[]</td></tr>
161					<tr><td>resize</td>	<td>Array&lt;Integer&gt;</td>		<td>maximum image constraint: array(width,height) or null</td><td>null</td></tr>
162					<tr><td>inline</td>	<td>String</td>		<td>a JQuery selector for inline browser</td><td>"body"</td></tr>
163					<tr><td>fixed</td>	<td>Boolean</td>	<td>keep the browser open after selection (only works when inline is not "body")</td><td>false</td></tr>
164					<tr><td>cookie</td>	<td>Boolean</td>	<td>use a cookie to remember path, x, y, w, h</td><td>false</td></tr>
165					<tr><td>copyRelative</td><td>Boolean</td><td>CTRL-c the relative or absolute path (false for absolute)</td><td>false</td></tr>
166					<tr><td>bgcolor</td>	<td>String</td>	<td>a hex string for the background color</td><td>"#000"</td></tr>
167					<tr><td>bgalpha</td>	<td>Float</td>	<td>a floating point from 0 to 1 for background alpha</td><td>.5</td></tr>
168					<tr><td>x</td>		<td>Integer</td>	<td>x position, centered if left null</td><td>null</td></tr>
169					<tr><td>y</td>		<td>Integer</td>	<td>y position, centered if left null</td><td>null</td></tr>
170					<tr><td>w</td>		<td>Integer</td>	<td>width</td><td>460</td></tr>
171					<tr><td>h</td>		<td>Integer</td>	<td>height</td><td>480</td></tr>
172				
173					<tr><th colspan="4">the following properties normally need no change</th></tr>
174					<tr><td>img</td>	<td>Array&lt;String&gt;</td>	<td>image file extensions for preview</td><td>["gif", "jpg", "jpeg", "png"]</td></tr>
175					<tr><td>ascii</td>	<td>Array&lt;String&gt;</td>	<td>text file extensions for preview</td><td>["txt", "xml", "html", "htm", "eml", "ffcmd", "js", "as", "php", "css", "java", "cpp", "pl", "log"]</td></tr>
176					<tr><td>movie</td>	<td>Array&lt;String&gt;</td>	<td>movie file extensions for preview</td><td>["mp3","mp4","m4v","m4a","3gp","mov","flv","f4v"]</td></tr>
177					
178					<tr><th colspan="4">The following properties are set automaticly from the init file, explicitly setting these from js can lead to unexpected results.</th></tr>
179					<tr><td>sfbpath</td><td>String</td>		<td>the path of sfbrowser</td><td>"sfbrowser/"</td></tr>
180					<tr><td>base</td>	<td>String</td>		<td>the upload folder</td><td>"data/"</td></tr>
181					<tr><td>deny</td>	<td>Array&lt;String&gt;</td>		<td>denied file extensions</td><td>["php", "php3", "phtml"]</td></tr>
182					<tr><td>icons</td>	<td>Array&lt;String&gt;</td>		<td>list of existing file icons</td><td>["jpg", "html", "ico"...(etc)]</td></tr>
183					<tr><td>preview</td><td>Integer</td>	<td>amount of bytes for ascii preview</td><td>600</td></tr>
184					<tr><td>connector</td><td>String</td>	<td>server side script type</td><td>"php"</td></tr>
185					<tr><td>lang</td><td>Object</td>		<td>language object</td><td>see lang/en.js</td></tr>
186					<tr><td>plugins</td><td>Array</td>		<td>plugins</td><td>[]</td></tr>
187					<tr><td>maxsize</td><td>Integer</td>	<td>upload_max_filesize in bytes</td><td>2097152</td></tr>
188					<tr><td>debug</td><td>Boolean</td>		<td>allows trace to console</td><td>false</td></tr>
189					
190				</tbody>
191			</table>
192
193			<h3 id="select">select</h3>
194			<p>The <span class="property">select</span> property is something you will want to set if you want SFBrowser to be usefull. It's value has to be a function with one parameter: an array containing objects for the selected files (for instance: function(a){alert(a)};). Each object in that array has the following properties (where applicable):</p>
195			<table id="returnobjects" cellpadding="0" cellspacing="0">
196				<thead><tr><th>property</th><th>type</th><th>description</th></tr></thead>
197				<tbody>
198					<tr><td>file</td>		<td>String</td>		<td>the file including its path (relative to base)</td></tr>
199					<tr><td>mime</td>		<td>String</td>		<td>the filetype</td></tr>
200					<tr><td>rsize</td>		<td>Integer</td>	<td>the size in bytes</td></tr>
201					<tr><td>size</td>		<td>String</td>		<td>the size formatted to B, kB, MB, GB etc...</td></tr>
202					<tr><td>time</td>		<td>Integer</td>	<td>the time in seconds from Unix Epoch</td></tr>
203					<tr><td>date</td>		<td>String</td>		<td>the time formatted in 'j-n-Y H:i'</td></tr>
204					<tr><td>width</td>		<td>Integer</td>	<td>if image, the width</td></tr>
205					<tr><td>height</td>		<td>Integer</td>	<td>if image, the height</td></tr>
206				</tbody>
207			</table>
208			<p>Keep in mind that all returned filepaths are relative to <span class="property">base</span> (or rather <span class="property">SFB_BASE</span>). If you run SFBrowser from within a CMS you'll have to alter the returned paths to the correct frontend path.</p>
209
210			<h3>allow and deny</h3>
211			<p>These properties are arrays containing file extensions that are, or are not shown in SFBrowser. This also applies to the file types that you upload.<br/>
212			For security reasons the main deny list is located at 'sfbrowser/connectors/php/config.php' by the name of <span class="property">SFB_DENY</span> (a comma separated list of extensions). Additional file types can be denied through javascript with the <span class="property">deny</span> property.<br/>
213			If <span class="property">allow</span> is left empty (which is the default) all file types are allowed except those listed in <span class="property">deny</span>.<br/>
214			Denying is stronger than allowing so an extension in both arrays will always be denied. The <span class="property">SFB_DENY</span> constant in 'sfbrowser/connectors/php/config.php' always has priority over the <span class="property">deny</span> property parsed through javascript.</p>
215
216
217			<h2>usage</h2>
218
219			<p>SFBrowser is designed to work like a normal OS's filebrowser, however, some interactions are not possible from within most web-browsers.</p>
220
221			<h3>file selection</h3>
222			<p>There are three ways to select a file: either press the 'Choose' button, double click the file, or select 'Choose' from the (right-click) context menu.</p>
223			<p>To select multiple files you can hold CTRL while clicking files, or press CTRL-A to select all files.</p>
224
225			<h3>context menu</h3>
226			<p><img src="data/contextmenu.png" align="right" alt="contextmenu" />Right clicking a file will popup a context menu with additional (or obvious) file operations. The two functions in here that are not found anywhere else in the interface are 'Duplicate' and 'Resize'.</p>
227			<p>'Duplicate' creates a copy of the selected file and appends it with a number (multiple file duplication does not work yet).</p>
228			
229			<h3>keyboard shortcuts</h3>
230			<p>SFBrowser also comes with a number of keyboard shortcuts to make your life easier:</p>
231			<table id="returnobjects" cellpadding="0" cellspacing="0">
232				<thead><tr><th>shortcut</th><th>action</th></tr></thead>
233				<tbody>
234					<tr><td>Escape or CTRL-q</td>		<td>closes SFBrowser</td></tr>
235					<tr><td>CTRL-c</td>					<td>copy the absolute or relative path of the selected file</td></tr>
236					<tr><td>CTRL-f</td>					<td>opens SFBrowser (only after one run)</td></tr>
237					<tr><td>F2</td>						<td>rename selected file</td></tr>
238					<tr><td>Return</td>					<td>choose file and close SFBrowser</td></tr>
239					<tr><td>CTRL-a</td>					<td>select all files</td></tr>
240					<tr><td>CTRL-click</td>				<td>select multiple files</td></tr>
241				</tbody>
242			</table>
243		
244
245
246			<h2>examples</h2>
247
248			<?php if ($_SERVER["SERVER_NAME"]=="sfbrowser.sjeiti.com") echo "<p class=\"alert\">For security reasons all manipulations in the examples are disabled. You can look at it, but it will not work.</p>"; ?>
249
250			<h3>a simple one</h3>
251			<p>The selected files are added to a list and their sizes are shown. Select multiple files by pressing CTRL and selecting. Start <a onclick="$.sfb({select:addFiles,plugins:[]});">adding files.</a></p>
252			<pre class="example">$.sfb({select:addFiles,plugins:[]});</pre> 
253			<div id="addfiles"></div>
254
255			<h3>swf uploader</h3>
256			<p>The <a onclick="$.sfb({select:addFiles,plugins:['createascii'],swfupload:true,preview:false,bgcolor:'#CEE9F4',bgalpha:.8});">swf uploader</a> allows multiple simultanious uploads but does require the <a href="http://get.adobe.com/shockwave/" target="_blank">Adobe Shockwave plugin</a>.</p>
257			<pre class="example">$.sfb({
258	 select:addFiles
259	,plugins:['createascii']
260	,swfupload:true
261	,preview:false
262	,bgcolor:'#CEE9F4'
263	,bgalpha:.8
264});</pre> 
265			<div id="addfiles"></div>
266			
267			<h3>allowing only images</h3>
268			<p>The <span class="property">allow</span> property is set to accept only images. The selected images are added to a div. Note also the title of the SFBrowser is now changed to: <a onclick="$.sfb({folder:'ImageFolder/',title:'Add some images',allow:['jpeg','png','gif','jpg'],resize:[640,480],select:addImages});">Add some images</a>.</p>
269			<pre class="example">$.sfb({
270	 folder:	'ImageFolder/'
271	,title:		'Add some images'
272	,allow:		['jpeg','png','gif','jpg']
273	,resize:	[640,480]
274	,select:	addImages
275	,plugins:	['filetree']
276});</pre> 
277
278			<h3>inline</h3>
279			<p>When you set the <span class="property">inline</span> property to something other than "body" SFBrowser will no appear as an overlay but inside the new value. The value has to be a regular JQuery selector with a single result. A selector with possible multiple results will really screw things up. If you're unsure about your selector simply add ':eq(0)' to it to ensure a single result<br/>
280			Contrary to an overlay, an inline SFBrowser will keep the rest of your page clickable.<br/>
281			Setting the <span class="property">fixed</span> property to 'true' will also disable closing the filebrowser (this will only work on inline SFBrowsers). However, calling up a new instance of SFBrowser will close any previous instance.<br/>
282			<a onclick="$.sfb({ inline:'#inhere', fixed:true, select:function(a){alert(a.length)} });">Open inline fixed</a></p>
283			<pre class="example">$.sfb({ inline:'#inhere', fixed:true, select:function(a){alert(a.length+" files selected")} });</pre> 
284			<div id="inhere"></div>
285
286
287			<h2>plugins</h2>
288
289			<p>Plugins can be used to extend or alter the basic functionality of SFBrowser. These have to be set in 'sfbrowser/connectors/php/config.php'.<br/>
290			Once set, the init will automaticly fill the $.sfbrowser.defaults.plugins variable. You can override this by parsing the <span class="property">plugins</span> variable in your SFBrowser call (as shown in example 1).</p>
291			<p>Right now SFBrowser comes with a couple plugins:</p>
292
293			<h3>filetree</h3>
294			<p><img src="data/filetree.png" align="left" alt="filetree" style="margin: 0px 30px 30px 0px;" />This plugin adds an additional filetree to the left of the filetable.</p>
295
296			<h3>createascii</h3>
297			<p>A simple plugin that lets you create and edit ascii files. Don't expect anything fancy, it's just a plain text editor. Naturally you can only create and edit files that are set in <span class="property">allow</span> or not set in <span class="property">deny</span>.</p>
298
299			<h3>imageresize</h3>
300			<p><img src="data/resize_image.jpg" align="left" alt="imageresize" style="margin: 0px 30px 30px 0px;" />This plugin lets you resize and crop jpeg images. Indexed color images (gif and png) require different code that isn't implemented yet.<br />
301			Selecting 'Resize' from a files context menu will bring up a window as shown here. Larger images are always scaled down to fit the window, this scale is shown as a percentage above the image. You can resize the window if you want to bring the scaling up to one hundred percent.<br/>
302			Dragging the red squares resizes the image. Dragging the blue squares will crop the image. You can also manually enter the desired with or height.<br/>
303			Since upscaling mostly results in ugly images, upscaling is turned off. The images aspect ratio will always be maintained (meaning you can't just resize the width, the height will always follow accordingly).</p>
304
305			<h3>plugin creation</h3>
306			<p>A plugin can be one Javascript file (filetree plugin) but it can also make use of PHP (imageresize plugin).<br/>
307			If a plugin contains either or both a config.php and/or and init.php file the initialisation will include them. It is then assumed that all javascript and/or css inclusion will be handled by that init.php file.<br/>
308			If no init.php file is found, the SFBrowser initialisation will then try to find and add both the plugin.js and/or the plugin.css.<br/>
309			Right now that is all the documentation there is for plugin development. If you want to develop one simply have to look at the existing two and follow their structure. </p>
310
311
312			<h2>connectors</h2>
313
314			<p>A connector folder should at least have the following files.</p>
315			<ul>
316				<li>sfbrowser/connectors/[type]/config.[type]</li>
317				<li>sfbrowser/connectors/[type]/init.[type]</li>
318				<li>sfbrowser/connectors/[type]/sfbrowser.[type]</li>
319			</ul>
320
321			<h3>config file</h3>
322			<p>The config file should at least have the following settings:</p>
323			<ul>
324				<li>path of sfbrowser</li>
325				<li>the base upload folder</li>
326				<li>the language ISO code</li>
327				<li>ASCII preview ammount</li>
328				<li>a list of forbidden file extensions</li>
329				<li>an error return code (for severe misuse)</li>
330			</ul>
331			<p>The config file is used in both the init file (to parse to sfbrowser js) and in the actual sfbrowser file (which does the actual server side thinking).</p>
332
333			<h3>init file</h3>
334			<p>The init file must be called in the html documents header in order to write these lines:</p>
335			<pre>&lt;link rel="stylesheet" type="text/css" media="screen" href="sfbrowser/css/sfbrowser.css" /&gt;
336&lt;script type="text/javascript" src="sfbrowser/array.js"&gt;&lt;/script&gt;
337&lt;script type="text/javascript" src="sfbrowser/jquery.tinysort.min.js"&gt;&lt;/script&gt;
338&lt;script type="text/javascript" src="sfbrowser/jquery.sfbrowser.min.js"&gt;&lt;/script&gt;
339&lt;script type="text/javascript" src="sfbrowser/lang/en.js"&gt;&lt;/script&gt;
340&lt;script type="text/javascript"&gt;
341	&lt;!--
342	$.sfbrowser.defaults.connector = "php";
343	$.sfbrowser.defaults.sfbpath = "sfbrowser/";
344	$.sfbrowser.defaults.base = "../data/";
345	$.sfbrowser.defaults.preview = 600;
346	$.sfbrowser.defaults.deny = ["php","php3","phtml"];
347	$.sfbrowser.defaults.icons = ['ai','as','avi','bmp','cs','default',(...)];
348	--&gt;
349&lt;/script&gt;</pre>
350			<p>As you might have noticed, most of these lines are formed to what is set in the config file. The icons variable is a folder readout from the sfbrowser/icons/ folder.</p>
351			
352			<h3>sfbrowser file</h3>
353			<p>The sfbrowser file is the actual connector to the SFBrowser plugin. Mostly it will require some POST variables and a JSON output object.<br/>
354			A POST will always contain a variable "a" that will determine the action to be taken.</p>
355			<p>For all actions counts: make absolutely sure that the incoming data corresponds with that set in the config file!</p>
356			<ul>
357				<li>Do not upload forbidden filetypes.</li>
358				<li>Only upload, rename, create, view, change and delete within base upload path.</li>
359				<li>Rename files, but not the file extension.</li>
360				<li>Do not return, force download or preview forbidden filetypes.</li>
361			</ul>
362			<p>Mostly, a POST (or GET in case of force download) will contain the variable "folder" and the variable "file". Check both of these against the base upload folder set in the config. If it's outside, somebody is probably screwing around.<br/>
363			Just to be sure, check the number of _GET, _POST and _FILES variables. A _POST["a"] can only get a certain ammount of each, if these differ, something fishy might be going on.<br/>
364			If suspicious action occurs you can redirect them to the return error code set in the config file in order to block acces or whatever you'd like to do(??haven't really figured out how to go from there, consider it a loose stub??).</p>
365			<p>A number of the JSON outputs contain file descriptions. In the description of the types of actions the file object is referred to as &lt;FileObject&gt;. It looks like this:</p>
366			<pre>JSON FileObject: {
367	 file:		&lt;String&gt;	file name
368	,mime:		&lt;String&gt;	file extention
369	,rsize:		&lt;uint&gt;		file size in bytes
370	,size:		&lt;String&gt;	file size in kB, MB or whatever
371	,time:		&lt;uint&gt;		time in Unix Epoch
372	,date:		&lt;String&gt;	time in "j-n-Y H:i"
373	,width:		&lt;uint&gt;		image width in pixels
374	,height:	&lt;uint&gt;		image height in pixels
375}</pre>
376			<p>The following are the possible values for _POST["a"]: the possible actions that can be taken and the required return values.</p>
377
378			<h3>_POST["a"]=="fileList" :: retreive file list</h3>
379			<pre>input:
380	_POST["folder"] &lt;String&gt;	path to folder
381action:
382	Read the contents of a folder
383	Filter out the forbidden file types
384	If applicable, filter for allowed file types
385output: JSON {
386	 error:		&lt;String&gt;	error message (see lang.js)
387	,msg:		&lt;String&gt;	succes message (see lang.js)
388	,data:		&lt;Object&gt;	object containing &lt;FileObject&gt;'s
389}
390example: {
391	error:	"",
392	msg:	"fileListing",
393	data: {
394		a: &lt;FileObject&gt;,
395		b: &lt;FileObject&gt;,
396		c: &lt;FileObject&gt;,
397		...
398	}
399}</pre>
400
401			<h3>_POST["a"]=="upload" :: file upload</h3>
402			<pre>input:
403	_FILES["fileToUpload"]	&lt;Object&gt;	file object
404	_POST["file"]		&lt;String&gt;	path to folder
405	_POST["deny"]		&lt;String&gt;	pipe separated string of denied file extensions ("php|tpl|log")
406	_POST["allow"]		&lt;String&gt;	pipe separated string of allowed file extensions ("gif|jpg|jpeg|png")
407	_POST["resize"]		&lt;Array&gt;		resize image to [width,heigth]
408	
409action:
410	Check for _FILES["fileToUpload"]["error"]
411	Check _FILES["fileToUpload"]["tmp_name"] for actual upload
412	Check forbidden filetypes
413	Check allowed filetypes
414	Check upload folder for similarly named file
415	Move file to upload folder
416	If applicable, resize image
417output: JSON {
418	 error:		&lt;String&gt;	error message (see lang.js)
419	,msg:		&lt;String&gt;	succes message (see lang.js)
420	,data:		&lt;FileObject&gt;	uploaded file
421}</pre>
422
423			<h3>_POST["a"]=="duplicate" :: duplicate file</h3>
424			<pre>input:
425	_POST["file"]	&lt;String&gt;	file name
426	_POST["folder"]	&lt;String&gt;	file folder
427action:
428	Create new non-existing file name
429	Duplicate file to that name
430output: JSON {
431	 error:		&lt;String&gt;	error message (see lang.js)
432	,msg:		&lt;String&gt;	succes message (see lang.js)
433	,data:		&lt;FileObject&gt;	duplicated file
434}</pre>
435
436			<h3>_POST["a"]=="delete" :: file delete</h3>
437			<pre>input:
438	_POST["file"]	&lt;String&gt;	file name
439	_POST["folder"]	&lt;String&gt;	file folder
440action:
441	delete file
442output: JSON {
443	 error:		&lt;String&gt;	error message (see lang.js)
444	,msg:		&lt;String&gt;	succes message (see lang.js)
445}</pre>
446
447			<h3>_POST["a"]=="download" :: file force download</h3>
448			<pre>input:
449	_POST["file"]	&lt;String&gt;	file name
450	_POST["folder"]	&lt;String&gt;	file folder
451action:
452	Force file download
453output: nothing</pre>
454
455			<h3>_POST["a"]=="read" :: read txt file contents</h3>
456			<pre>input:
457	_POST["file"]	&lt;String&gt;	file name
458	_POST["folder"]	&lt;String&gt;	file folder
459action:
460	Read and return file contents
461output: JSON {
462	 error:		&lt;String&gt;	error message (see lang.js)
463	,msg:		&lt;String&gt;	succes message (see lang.js)
464	,data: {
465		text:	&lt;String&gt;	first x amount of bytes from ascii file
466	}
467}</pre>
468
469			<h3>_POST["a"]=="rename" :: rename file</h3>
470			<pre>input:
471	_POST["file"]	&lt;String&gt;	original file name
472	_POST["folder"]	&lt;String&gt;	file folder
473	_POST["nfile"]	&lt;String&gt;	new file name
474action:
475	Check if new file name is valid
476	Rename file
477output: JSON {
478	 error:		&lt;String&gt;	error message (see lang.js)
479	,msg:		&lt;String&gt;	succes message (see lang.js)
480}</pre>
481
482			<h3>_POST["a"]=="addFolder" :: add folder</h3>
483			<pre>input:
484	_POST["folder"]		&lt;String&gt;	folder to create new folder into
485	_POST["foldername"]	&lt;String&gt;	new folder name
486action:
487	Create new folder
488output: JSON {
489	 error:		&lt;String&gt;	error message (see lang.js)
490	,msg:		&lt;String&gt;	succes message (see lang.js)
491	,data:		&lt;FileObject&gt;	newly created folder
492}</pre>
493
494			<h3>_POST["a"]=="bar" :: image resize (in imageresize plugin)</h3>
495			<pre>input:
496	_POST["file"]	&lt;String&gt;	file name
497	_POST["folder"]	&lt;String&gt;	file folder
498	_POST["w"]	&lt;uint&gt;		new width
499	_POST["h"]	&lt;uint&gt;		new height
500action:
501	Resize image
502output: JSON {
503	 error:		&lt;String&gt;	error message (see lang.js)
504	,msg:		&lt;String&gt;	succes message (see lang.js)
505}</pre>
506
507		</div>
508		<div id="footer"> 
509			<div>??? 2008 - 2011 <a href="http://www.sjeiti.com/">Ron Valstar</a></div>
510		</div>
511	</body>
512</html>