PageRenderTime 28ms CodeModel.GetById 21ms RepoModel.GetById 0ms app.codeStats 0ms

/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. <!--script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script-->
  8. <!--
  9. <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
  10. <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
  11. <script type="text/javascript" src="scripts/jquery-1.4.1.min.js"></script>
  12. <script type="text/javascript" src="scripts/jquery-1.4.4.min.js"></script>
  13. <script type="text/javascript" src="scripts/jquery-1.5.2.min.js"></script>
  14. <script type="text/javascript" src="scripts/jquery-1.6b1.js"></script>
  15. -->
  16. <script type="text/javascript" src="scripts/jquery-1.7b2.js"></script>
  17. <?php include("sfbrowser/connectors/php/init.php"); ?>
  18. <script type="text/javascript">
  19. function addFiles(aFiles) {
  20. if ($('#addfiles>ul').length==0) $('#addfiles').html('<ul/>');
  21. 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>");
  22. }
  23. function addImages(aFiles) {
  24. $.each(aFiles,function(i,o){
  25. $("#addimages").append("<img src=\""+o.file+"\" onclick=\"$(this).remove();\" />");
  26. });
  27. }
  28. $(function(){
  29. var fnTop = function(){$(document).scrollTop(0)};
  30. $("h1").text($.sfbrowser.id+" "+$.sfbrowser.version).click(fnTop);
  31. $("#page tr:odd").addClass("odd");
  32. $("#page tbody>tr").find("td:eq(0)").addClass("property");
  33. var mMenu = $("<ul id=\"menu\" />").appendTo("#header>div");
  34. $("<li><a href=\"#\">SFBrowser</a></li>").appendTo(mMenu).click(fnTop);
  35. $("#page h2").each(function(i,o){
  36. mMenu.append("<li><a href=\"#"+$(this).text()+"\">"+$(this).text()+"</a></li>");
  37. $(this).attr("id",$(this).text());
  38. });
  39. $.sfb({select:addFiles,plugins:['createascii'],swfupload:true,preview:false,bgcolor:'#CEE9F4',bgalpha:.8}); // todo: rem
  40. });
  41. //$(window).load(function() {
  42. // $.fn.sfbrowser({x:20,y:20,w:700});
  43. //});
  44. // FLATTR code
  45. /* <![CDATA[ */
  46. (function() {
  47. var s = document.createElement('script'), t = document.getElementsByTagName('script')[0];
  48. s.type = 'text/javascript';
  49. s.async = true;
  50. s.src = 'http://api.flattr.com/js/0.6/load.js?mode=auto';
  51. t.parentNode.insertBefore(s, t);
  52. })();
  53. /* ]]> */
  54. </script>
  55. <script src="http://www.sjeiti.com/ga.js" type="text/javascript"></script>
  56. </head>
  57. <body>
  58. <div id="header">
  59. <div>
  60. <h1><span>SFBrowser</span></h1>
  61. <p style="position:absolute;left:-80px;top:55px;"><a class="FlattrButton" style="display:none;" href="http://sfbrowser.sjeiti.com/"></a></p>
  62. </div>
  63. </div>
  64. <div id="page">
  65. <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/>
  66. 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/>
  67. 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>
  68. <p>SFBrowser is also available as a <a href="http://wordpress.org/extend/plugins/sfbrowser/" rel="nofollow">Wordpress plugin</a>.</p>
  69. <h3>features</h3>
  70. <ul>
  71. <li>ajax file upload</li>
  72. <li>optional as3 swf upload (queued multiple uploads, upload progress, upload canceling, selection filtering, size filtering)</li>
  73. <li>localisation (English, Dutch or Spanish)</li>
  74. <li>server side script connector</li>
  75. <li>plugin environment (with filetree and imageresize plugin)</li>
  76. <li>data caching (minimal server communication)</li>
  77. <li>sortable file table</li>
  78. <li>file filtering</li>
  79. <li>file renaming</li>
  80. <li>file duplication</li>
  81. <li>file download</li>
  82. <li>file/folder context menu</li>
  83. <li>file preview (image, audio, video, text/ascii and swf)</li>
  84. <li>folder creation</li>
  85. <li>multiple files selection</li>
  86. <li>inline or overlay window</li>
  87. <li>window dragging and resizing</li>
  88. <li>cookie for size, position and path</li>
  89. <li>keyboard shortcuts</li>
  90. <li>key file selection</li>
  91. </ul>
  92. <h3>caution</h3>
  93. <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/>
  94. 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>
  95. <h2>installation</h2>
  96. <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>
  97. <ul>
  98. <li>adjust 'sfbrowser/connectors/php/config.php' to your needs</li>
  99. <li>include the 'sfbrowser/connectors/php/init.php' in the head of the html</li>
  100. <li>if not on localhost set the correct chmod of the upload folder and it's contents</li>
  101. </ul>
  102. <h3>configuration file</h3>
  103. <p>The 'sfbrowser/connectors/php/config.php' file contains a few basic constants.</p>
  104. <table cellpadding="0" cellspacing="0">
  105. <thead><tr><th>property</th><th>type</th><th>description</th><th>default</th></tr></thead>
  106. <tbody>
  107. <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>
  108. <tr><td>SFB_BASE</td> <td>String</td> <td>upload folder (relative to <span class="property">SFB_PATH</span>)</td><td>"../data/"</td></tr>
  109. <tr><td>SFB_LANG</td> <td>String</td> <td>language ISO code</td><td>"en"</td></tr>
  110. <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>
  111. <tr><td>SFB_DENY</td> <td>String</td> <td>forbidden file extensions</td><td>"php,php3,phtml"</td></tr>
  112. <tr><td>FILETIME</td> <td>String</td> <td>datetime format</td><td>"j-n-Y H:i"</td></tr>
  113. <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>
  114. <tr><td>SFB_PLUGINS</td> <td>String</td> <td>case sensitive, comma separated string with plugin names</td><td>""imageresize,filetree""</td></tr>
  115. <tr><td>SFB_DEBUG</td> <td>Boolean</td> <td>debug boolean, enables log file and console trace</td><td>false</td></tr>
  116. </tbody>
  117. </table>
  118. <h3>localisation</h3>
  119. <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/>
  120. 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>
  121. <h3>debug</h3>
  122. <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>
  123. <h3 id="javascript">javascript</h3>
  124. <p>You can call up SFBrowser by '$.fn.sfbrowser();' or the shorter '$.sfb();'</p>
  125. <p>SFBrowser has a number of properties you can parse:</p>
  126. <table cellpadding="0" cellspacing="0">
  127. <thead><tr><th>property</th><th>type</th><th>description</th><th>default</th></tr></thead>
  128. <tbody>
  129. <tr><td>title</td> <td>String</td> <td>title of the SFBrowser window</td><td>"SFBrowser"</td></tr>
  130. <tr><td>select</td> <td>Function</td> <td>calback function on choose</td><td>function(a,params){trace(a,params)}</td></tr>
  131. <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>
  132. <tr><td>selectnum</td><td>Integer</td><td>number of selectable files (0==any)</td><td>0</td></tr>
  133. <tr><td>file</td> <td>String</td> <td>selected file</td><td>""</td></tr>
  134. <tr><td>folder</td> <td>String</td> <td>a subfolder (relative to base, to which all returned files are relative)</td><td>""</td></tr>
  135. <tr><td>dirs</td> <td>Boolean</td> <td>allow visibility and creation/deletion of subdirectories.</td><td>true</td></tr>
  136. <tr><td>upload</td> <td>Boolean</td> <td>allow upload of files</td><td>true</td></tr>
  137. <tr><td>swfupload</td><td>Boolean</td> <td>use swf uploader instead of form hack</td><td>false</td></tr>
  138. <tr><td>allow</td> <td>Array&lt;String&gt;</td> <td>allowed file extensions</td><td>[]</td></tr>
  139. <tr><td>resize</td> <td>Array&lt;Integer&gt;</td> <td>maximum image constraint: array(width,height) or null</td><td>null</td></tr>
  140. <tr><td>inline</td> <td>String</td> <td>a JQuery selector for inline browser</td><td>"body"</td></tr>
  141. <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>
  142. <tr><td>cookie</td> <td>Boolean</td> <td>use a cookie to remember path, x, y, w, h</td><td>false</td></tr>
  143. <tr><td>copyRelative</td><td>Boolean</td><td>CTRL-c the relative or absolute path (false for absolute)</td><td>false</td></tr>
  144. <tr><td>bgcolor</td> <td>String</td> <td>a hex string for the background color</td><td>"#000"</td></tr>
  145. <tr><td>bgalpha</td> <td>Float</td> <td>a floating point from 0 to 1 for background alpha</td><td>.5</td></tr>
  146. <tr><td>x</td> <td>Integer</td> <td>x position, centered if left null</td><td>null</td></tr>
  147. <tr><td>y</td> <td>Integer</td> <td>y position, centered if left null</td><td>null</td></tr>
  148. <tr><td>w</td> <td>Integer</td> <td>width</td><td>460</td></tr>
  149. <tr><td>h</td> <td>Integer</td> <td>height</td><td>480</td></tr>
  150. <tr><th colspan="4">the following properties normally need no change</th></tr>
  151. <tr><td>img</td> <td>Array&lt;String&gt;</td> <td>image file extensions for preview</td><td>["gif", "jpg", "jpeg", "png"]</td></tr>
  152. <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>
  153. <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>
  154. <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>
  155. <tr><td>sfbpath</td><td>String</td> <td>the path of sfbrowser</td><td>"sfbrowser/"</td></tr>
  156. <tr><td>base</td> <td>String</td> <td>the upload folder</td><td>"data/"</td></tr>
  157. <tr><td>deny</td> <td>Array&lt;String&gt;</td> <td>denied file extensions</td><td>["php", "php3", "phtml"]</td></tr>
  158. <tr><td>icons</td> <td>Array&lt;String&gt;</td> <td>list of existing file icons</td><td>["jpg", "html", "ico"...(etc)]</td></tr>
  159. <tr><td>preview</td><td>Integer</td> <td>amount of bytes for ascii preview</td><td>600</td></tr>
  160. <tr><td>connector</td><td>String</td> <td>server side script type</td><td>"php"</td></tr>
  161. <tr><td>lang</td><td>Object</td> <td>language object</td><td>see lang/en.js</td></tr>
  162. <tr><td>plugins</td><td>Array</td> <td>plugins</td><td>[]</td></tr>
  163. <tr><td>maxsize</td><td>Integer</td> <td>upload_max_filesize in bytes</td><td>2097152</td></tr>
  164. <tr><td>debug</td><td>Boolean</td> <td>allows trace to console</td><td>false</td></tr>
  165. </tbody>
  166. </table>
  167. <h3 id="select">select</h3>
  168. <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>
  169. <table id="returnobjects" cellpadding="0" cellspacing="0">
  170. <thead><tr><th>property</th><th>type</th><th>description</th></tr></thead>
  171. <tbody>
  172. <tr><td>file</td> <td>String</td> <td>the file including its path (relative to base)</td></tr>
  173. <tr><td>mime</td> <td>String</td> <td>the filetype</td></tr>
  174. <tr><td>rsize</td> <td>Integer</td> <td>the size in bytes</td></tr>
  175. <tr><td>size</td> <td>String</td> <td>the size formatted to B, kB, MB, GB etc...</td></tr>
  176. <tr><td>time</td> <td>Integer</td> <td>the time in seconds from Unix Epoch</td></tr>
  177. <tr><td>date</td> <td>String</td> <td>the time formatted in 'j-n-Y H:i'</td></tr>
  178. <tr><td>width</td> <td>Integer</td> <td>if image, the width</td></tr>
  179. <tr><td>height</td> <td>Integer</td> <td>if image, the height</td></tr>
  180. </tbody>
  181. </table>
  182. <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>
  183. <h3>allow and deny</h3>
  184. <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/>
  185. 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/>
  186. 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/>
  187. 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>
  188. <h2>usage</h2>
  189. <p>SFBrowser is designed to work like a normal OS's filebrowser, however, some interactions are not possible from within most web-browsers.</p>
  190. <h3>file selection</h3>
  191. <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>
  192. <p>To select multiple files you can hold CTRL while clicking files, or press CTRL-A to select all files.</p>
  193. <h3>context menu</h3>
  194. <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>
  195. <p>'Duplicate' creates a copy of the selected file and appends it with a number (multiple file duplication does not work yet).</p>
  196. <h3>keyboard shortcuts</h3>
  197. <p>SFBrowser also comes with a number of keyboard shortcuts to make your life easier:</p>
  198. <table id="returnobjects" cellpadding="0" cellspacing="0">
  199. <thead><tr><th>shortcut</th><th>action</th></tr></thead>
  200. <tbody>
  201. <tr><td>Escape or CTRL-q</td> <td>closes SFBrowser</td></tr>
  202. <tr><td>CTRL-c</td> <td>copy the absolute or relative path of the selected file</td></tr>
  203. <tr><td>CTRL-f</td> <td>opens SFBrowser (only after one run)</td></tr>
  204. <tr><td>F2</td> <td>rename selected file</td></tr>
  205. <tr><td>Return</td> <td>choose file and close SFBrowser</td></tr>
  206. <tr><td>CTRL-a</td> <td>select all files</td></tr>
  207. <tr><td>CTRL-click</td> <td>select multiple files</td></tr>
  208. </tbody>
  209. </table>
  210. <h2>examples</h2>
  211. <?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>"; ?>
  212. <h3>a simple one</h3>
  213. <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>
  214. <pre class="example">$.sfb({select:addFiles,plugins:[]});</pre>
  215. <div id="addfiles"></div>
  216. <h3>swf uploader</h3>
  217. <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>
  218. <pre class="example">$.sfb({
  219. select:addFiles
  220. ,plugins:['createascii']
  221. ,swfupload:true
  222. ,preview:false
  223. ,bgcolor:'#CEE9F4'
  224. ,bgalpha:.8
  225. });</pre>
  226. <div id="addfiles"></div>
  227. <h3>allowing only images</h3>
  228. <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>
  229. <pre class="example">$.sfb({
  230. folder: 'ImageFolder/'
  231. ,title: 'Add some images'
  232. ,allow: ['jpeg','png','gif','jpg']
  233. ,resize: [640,480]
  234. ,select: addImages
  235. ,plugins: ['filetree']
  236. });</pre>
  237. <h3>inline</h3>
  238. <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/>
  239. Contrary to an overlay, an inline SFBrowser will keep the rest of your page clickable.<br/>
  240. 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/>
  241. <a onclick="$.sfb({ inline:'#inhere', fixed:true, select:function(a){alert(a.length)} });">Open inline fixed</a></p>
  242. <pre class="example">$.sfb({ inline:'#inhere', fixed:true, select:function(a){alert(a.length+" files selected")} });</pre>
  243. <div id="inhere"></div>
  244. <h2>plugins</h2>
  245. <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/>
  246. 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>
  247. <p>Right now SFBrowser comes with a couple plugins:</p>
  248. <h3>filetree</h3>
  249. <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>
  250. <h3>createascii</h3>
  251. <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>
  252. <h3>imageresize</h3>
  253. <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 />
  254. 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/>
  255. 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/>
  256. 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>
  257. <h3>plugin creation</h3>
  258. <p>A plugin can be one Javascript file (filetree plugin) but it can also make use of PHP (imageresize plugin).<br/>
  259. 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/>
  260. 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/>
  261. 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>
  262. <h2>connectors</h2>
  263. <p>A connector folder should at least have the following files.</p>
  264. <ul>
  265. <li>sfbrowser/connectors/[type]/config.[type]</li>
  266. <li>sfbrowser/connectors/[type]/init.[type]</li>
  267. <li>sfbrowser/connectors/[type]/sfbrowser.[type]</li>
  268. </ul>
  269. <h3>config file</h3>
  270. <p>The config file should at least have the following settings:</p>
  271. <ul>
  272. <li>path of sfbrowser</li>
  273. <li>the base upload folder</li>
  274. <li>the language ISO code</li>
  275. <li>ASCII preview ammount</li>
  276. <li>a list of forbidden file extensions</li>
  277. <li>an error return code (for severe misuse)</li>
  278. </ul>
  279. <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>
  280. <h3>init file</h3>
  281. <p>The init file must be called in the html documents header in order to write these lines:</p>
  282. <pre>&lt;link rel="stylesheet" type="text/css" media="screen" href="sfbrowser/css/sfbrowser.css" /&gt;
  283. &lt;script type="text/javascript" src="sfbrowser/array.js"&gt;&lt;/script&gt;
  284. &lt;script type="text/javascript" src="sfbrowser/jquery.tinysort.min.js"&gt;&lt;/script&gt;
  285. &lt;script type="text/javascript" src="sfbrowser/jquery.sfbrowser.min.js"&gt;&lt;/script&gt;
  286. &lt;script type="text/javascript" src="sfbrowser/lang/en.js"&gt;&lt;/script&gt;
  287. &lt;script type="text/javascript"&gt;
  288. &lt;!--
  289. $.sfbrowser.defaults.connector = "php";
  290. $.sfbrowser.defaults.sfbpath = "sfbrowser/";
  291. $.sfbrowser.defaults.base = "../data/";
  292. $.sfbrowser.defaults.preview = 600;
  293. $.sfbrowser.defaults.deny = ["php","php3","phtml"];
  294. $.sfbrowser.defaults.icons = ['ai','as','avi','bmp','cs','default',(...)];
  295. --&gt;
  296. &lt;/script&gt;</pre>
  297. <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>
  298. <h3>sfbrowser file</h3>
  299. <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/>
  300. A POST will always contain a variable "a" that will determine the action to be taken.</p>
  301. <p>For all actions counts: make absolutely sure that the incoming data corresponds with that set in the config file!</p>
  302. <ul>
  303. <li>Do not upload forbidden filetypes.</li>
  304. <li>Only upload, rename, create, view, change and delete within base upload path.</li>
  305. <li>Rename files, but not the file extension.</li>
  306. <li>Do not return, force download or preview forbidden filetypes.</li>
  307. </ul>
  308. <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/>
  309. 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/>
  310. 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>
  311. <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>
  312. <pre>JSON FileObject: {
  313. file: &lt;String&gt; file name
  314. ,mime: &lt;String&gt; file extention
  315. ,rsize: &lt;uint&gt; file size in bytes
  316. ,size: &lt;String&gt; file size in kB, MB or whatever
  317. ,time: &lt;uint&gt; time in Unix Epoch
  318. ,date: &lt;String&gt; time in "j-n-Y H:i"
  319. ,width: &lt;uint&gt; image width in pixels
  320. ,height: &lt;uint&gt; image height in pixels
  321. }</pre>
  322. <p>The following are the possible values for _POST["a"]: the possible actions that can be taken and the required return values.</p>
  323. <h3>_POST["a"]=="fileList" :: retreive file list</h3>
  324. <pre>input:
  325. _POST["folder"] &lt;String&gt; path to folder
  326. action:
  327. Read the contents of a folder
  328. Filter out the forbidden file types
  329. If applicable, filter for allowed file types
  330. output: JSON {
  331. error: &lt;String&gt; error message (see lang.js)
  332. ,msg: &lt;String&gt; succes message (see lang.js)
  333. ,data: &lt;Object&gt; object containing &lt;FileObject&gt;'s
  334. }
  335. example: {
  336. error: "",
  337. msg: "fileListing",
  338. data: {
  339. a: &lt;FileObject&gt;,
  340. b: &lt;FileObject&gt;,
  341. c: &lt;FileObject&gt;,
  342. ...
  343. }
  344. }</pre>
  345. <h3>_POST["a"]=="upload" :: file upload</h3>
  346. <pre>input:
  347. _FILES["fileToUpload"] &lt;Object&gt; file object
  348. _POST["file"] &lt;String&gt; path to folder
  349. _POST["deny"] &lt;String&gt; pipe separated string of denied file extensions ("php|tpl|log")
  350. _POST["allow"] &lt;String&gt; pipe separated string of allowed file extensions ("gif|jpg|jpeg|png")
  351. _POST["resize"] &lt;Array&gt; resize image to [width,heigth]
  352. action:
  353. Check for _FILES["fileToUpload"]["error"]
  354. Check _FILES["fileToUpload"]["tmp_name"] for actual upload
  355. Check forbidden filetypes
  356. Check allowed filetypes
  357. Check upload folder for similarly named file
  358. Move file to upload folder
  359. If applicable, resize image
  360. output: JSON {
  361. error: &lt;String&gt; error message (see lang.js)
  362. ,msg: &lt;String&gt; succes message (see lang.js)
  363. ,data: &lt;FileObject&gt; uploaded file
  364. }</pre>
  365. <h3>_POST["a"]=="duplicate" :: duplicate file</h3>
  366. <pre>input:
  367. _POST["file"] &lt;String&gt; file name
  368. _POST["folder"] &lt;String&gt; file folder
  369. action:
  370. Create new non-existing file name
  371. Duplicate file to that name
  372. output: JSON {
  373. error: &lt;String&gt; error message (see lang.js)
  374. ,msg: &lt;String&gt; succes message (see lang.js)
  375. ,data: &lt;FileObject&gt; duplicated file
  376. }</pre>
  377. <h3>_POST["a"]=="delete" :: file delete</h3>
  378. <pre>input:
  379. _POST["file"] &lt;String&gt; file name
  380. _POST["folder"] &lt;String&gt; file folder
  381. action:
  382. delete file
  383. output: JSON {
  384. error: &lt;String&gt; error message (see lang.js)
  385. ,msg: &lt;String&gt; succes message (see lang.js)
  386. }</pre>
  387. <h3>_POST["a"]=="download" :: file force download</h3>
  388. <pre>input:
  389. _POST["file"] &lt;String&gt; file name
  390. _POST["folder"] &lt;String&gt; file folder
  391. action:
  392. Force file download
  393. output: nothing</pre>
  394. <h3>_POST["a"]=="read" :: read txt file contents</h3>
  395. <pre>input:
  396. _POST["file"] &lt;String&gt; file name
  397. _POST["folder"] &lt;String&gt; file folder
  398. action:
  399. Read and return file contents
  400. output: JSON {
  401. error: &lt;String&gt; error message (see lang.js)
  402. ,msg: &lt;String&gt; succes message (see lang.js)
  403. ,data: {
  404. text: &lt;String&gt; first x amount of bytes from ascii file
  405. }
  406. }</pre>
  407. <h3>_POST["a"]=="rename" :: rename file</h3>
  408. <pre>input:
  409. _POST["file"] &lt;String&gt; original file name
  410. _POST["folder"] &lt;String&gt; file folder
  411. _POST["nfile"] &lt;String&gt; new file name
  412. action:
  413. Check if new file name is valid
  414. Rename file
  415. output: JSON {
  416. error: &lt;String&gt; error message (see lang.js)
  417. ,msg: &lt;String&gt; succes message (see lang.js)
  418. }</pre>
  419. <h3>_POST["a"]=="addFolder" :: add folder</h3>
  420. <pre>input:
  421. _POST["folder"] &lt;String&gt; folder to create new folder into
  422. _POST["foldername"] &lt;String&gt; new folder name
  423. action:
  424. Create new folder
  425. output: JSON {
  426. error: &lt;String&gt; error message (see lang.js)
  427. ,msg: &lt;String&gt; succes message (see lang.js)
  428. ,data: &lt;FileObject&gt; newly created folder
  429. }</pre>
  430. <h3>_POST["a"]=="bar" :: image resize (in imageresize plugin)</h3>
  431. <pre>input:
  432. _POST["file"] &lt;String&gt; file name
  433. _POST["folder"] &lt;String&gt; file folder
  434. _POST["w"] &lt;uint&gt; new width
  435. _POST["h"] &lt;uint&gt; new height
  436. action:
  437. Resize image
  438. output: JSON {
  439. error: &lt;String&gt; error message (see lang.js)
  440. ,msg: &lt;String&gt; succes message (see lang.js)
  441. }</pre>
  442. </div>
  443. <div id="footer">
  444. <div>??? 2008 - 2011 <a href="http://www.sjeiti.com/">Ron Valstar</a></div>
  445. </div>
  446. </body>
  447. </html>