├── LICENSE ├── README.md ├── asset ├── css │ └── fba.css └── js │ └── fba.js ├── fba_api.php ├── files ├── folder1 │ ├── folder2 │ │ └── awesome.html │ └── tes1.html └── tes.html ├── index.html └── lib ├── .htaccess └── fba.php /LICENSE: -------------------------------------------------------------------------------- 1 | The MIT License (MIT) 2 | 3 | Copyright (c) 2014 Bachors 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | 23 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | jQuery-File-Browser-Awesome 2 | =========================== 3 |

Today we want to share a cool experiment with you. It is a file browser awesome, which you can upload to a folder somewhere on your site and share documents, pictures and other files with the world. The app is built with PHP, jQuery, fontawesome and uses CSS3.

4 | 5 |

USAGE:

6 |

CSS

7 |
 8 | <!-- Include Font Awesome -->
 9 | <link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
10 |         
11 | <!-- Codemirror -->
12 | <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.min.css">
13 | <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/dialog/dialog.min.css">
14 |         
15 | <!-- Custom Style -->
16 | <link type="text/css" rel="stylesheet" href="asset/css/fba.css" />
17 | 
18 |

HTML

19 |
20 | <div id="fba"></div>
21 | 
22 |

JS

23 |
24 | <!-- Codemirror -->
25 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.min.js"></script>
26 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/xml/xml.min.js"></script>
27 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/javascript/javascript.min.js"></script>
28 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/css/css.min.js"></script>
29 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/htmlmixed/htmlmixed.min.js"></script>
30 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/dialog/dialog.min.js"></script>
31 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/search/searchcursor.min.js"></script>
32 | <script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/search/search.min.js"></script>
33 |         
34 | <!-- Include jQuery -->
35 | <script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
36 |         
37 | <!-- Include fba.js -->
38 | <script src="asset/js/fba.js"></script>
39 | 
40 |
41 |

CONFIG:

42 |

1. fba_api.php

43 |
44 | // Include class fba.php
45 | include_once('lib/fba.php');
46 | 
47 | $dir = 'dir1/dir2'; // nama folder yang akan di scan.
48 | 
49 | $fba =  new fba($dir);
50 | 
51 | 52 |

2. Javascript code in your HTML page.

53 |
54 | fba({
55 |    host: 'http://your-domain.com/', // your host / domain
56 |    api: 'fba_api.php' // file name fba api
57 | });
58 | 
59 | 60 |

DEMO

61 | -------------------------------------------------------------------------------- /asset/css/fba.css: -------------------------------------------------------------------------------- 1 | /********************************************************************* 2 | * #### jQuery File Browser Awesome v0.2.0 #### 3 | * Coded by Ican Bachors 2014. 4 | * http://ibacor.com/labs/jquery-file-browser-awesome/ 5 | * Updates will be posted to this site. 6 | *********************************************************************/ 7 | 8 | #fba { 9 | font-family: Arial; 10 | font-size: 1em; 11 | display: block; 12 | color: #333; 13 | } 14 | 15 | #fba .fba_header, 16 | #fba .fba_body, 17 | #fba .fba_body .fba_content, 18 | #fba .fba_body .fba_root { 19 | display: block; 20 | margin: 0; 21 | } 22 | 23 | #fba .fba_header, 24 | #fba .fba_body .fba_content, 25 | #fba .fba_body .fba_root { 26 | padding: 9px 10px 10px; 27 | } 28 | 29 | #fba .fba_header div, 30 | #fba .fba_body .fba_content div { 31 | display: inline-block; 32 | width: 33%; 33 | overflow: hidden; 34 | white-space: nowrap; 35 | text-overflow: ellipsis; 36 | } 37 | 38 | #fba .fba_header { 39 | font-weight: bold; 40 | background-color: #f5f5f5; 41 | border: 1px solid #d8d8d8; 42 | border-radius: 3px 3px 0 0; 43 | } 44 | 45 | #fba .fba_header div { 46 | text-align: center; 47 | } 48 | 49 | #fba .fba_body { 50 | border: 0px; 51 | border-left: 1px solid #ddd; 52 | border-right: 1px solid #ddd; 53 | background: #fff; 54 | } 55 | 56 | #fba .fba_body .fba_content { 57 | color: #888; 58 | border: 0px; 59 | border-bottom: 1px solid #ddd; 60 | } 61 | 62 | #fba .fba_body .fba_content div.name { 63 | text-align: left; 64 | } 65 | 66 | #fba .fba_body .fba_content div.size, 67 | #fba .fba_body .fba_content div.modif { 68 | text-align: right; 69 | } 70 | 71 | #fba .fba_body .fba_root { 72 | border: 0px; 73 | border-bottom: 1px solid #c9e6f2; 74 | background-color: #f2f9fc; 75 | color: #888; 76 | text-align: left; 77 | } 78 | 79 | #fba .fba_direktori { 80 | margin-bottom: 10px; 81 | } 82 | 83 | #fba .fba_direktori a { 84 | color: #4078c0; 85 | text-decoration: none; 86 | } 87 | 88 | #fba .fba_direktori .rfile, 89 | #fba .fba_direktori .sub { 90 | font-family: Arial; 91 | color: #4078c0; 92 | } 93 | 94 | #fba .fba_direktori .fa { 95 | cursor: pointer; 96 | } 97 | 98 | #fba .fba_direktori .fa-folder { 99 | color: #80a6cd; 100 | } 101 | 102 | #fba .fba_direktori .fa-file-text-o { 103 | color: #767676; 104 | } 105 | 106 | #fba .fba_direktori .fa-cloud-download { 107 | color: #ea97f4; 108 | } 109 | 110 | #fba .fba_direktori .fa-android { 111 | color: #ADFF5C; 112 | } 113 | 114 | #fba .fba_direktori .fa-pdf-o { 115 | color: #FF6C60; 116 | } 117 | 118 | #fba .fba_direktori .fa-level-up { 119 | color: #FF5CAD; 120 | } 121 | 122 | #fba .fba_read_file { 123 | display: block; 124 | padding: 9px 10px 10px; 125 | margin: 0; 126 | background-color: #f5f5f5; 127 | border: 1px solid #d8d8d8; 128 | border-bottom: 0; 129 | border-radius: 3px 3px 0 0; 130 | } 131 | 132 | #fba .fba_read_file #rf { 133 | color: #888 134 | } 135 | 136 | #fba .CodeMirror { 137 | border: 1px solid #d8d8d8; 138 | line-height: 1.3; 139 | height: 400px; 140 | text-align: left; 141 | margin: 0px; 142 | } 143 | 144 | #fba .CodeMirror-linenumbers { 145 | padding: 0 8px; 146 | } 147 | -------------------------------------------------------------------------------- /asset/js/fba.js: -------------------------------------------------------------------------------- 1 | /********************************************************************* 2 | * #### jQuery File Browser Awesome v0.2.0 #### 3 | * Coded by Ican Bachors 2014. 4 | * http://ibacor.com/labs/jquery-file-browser-awesome/ 5 | * Updates will be posted to this site. 6 | *********************************************************************/ 7 | 8 | var fba = function(g) { 9 | if (g.host != undefined && g.api != undefined && g.host != '' && g.api != '') { 10 | var j = '
' + '
' + '', 11 | k = getParameterByName('path'); 12 | $("#fba").html(j); 13 | if (k != '') { 14 | if (k.indexOf('.') === -1) { 15 | fba_direktori(k) 16 | } else { 17 | var l = k.substring(k.lastIndexOf('/') + 1), 18 | gehu = k.replace('/' + l, ""); 19 | fba_direktori(gehu); 20 | fba_file(k) 21 | } 22 | } else { 23 | fba_direktori("") 24 | } 25 | var h = CodeMirror.fromTextArea(document.getElementById("fba_text"), { 26 | mode: "text/html", 27 | lineNumbers: true 28 | }) 29 | } else { 30 | alert('Options required.') 31 | } 32 | 33 | function fba_direktori(e) { 34 | $.ajax({ 35 | type: "POST", 36 | url: g.host + g.api, 37 | data: 'path=' + e, 38 | crossDomain: true, 39 | dataType: "json" 40 | }).done(function(c) { 41 | if (c.status == 'success') { 42 | var r = ""; 43 | r += '
Name
Size
Last Modified
'; 44 | r += '
'; 45 | if (e != "") { 46 | var d = e.split('/'), 47 | ee = []; 48 | for (i = 0; i < d.length - 1; i++) { 49 | ee.push(d[i]) 50 | } 51 | var f = (d.length > 1 ? ee.join('/') : ''); 52 | r += '
' + e + unescape('%3C%61%20%68%72%65%66%3D%27%68%74%74%70%73%3A%2F%2F%62%61%63%68%6F%72%73%2E%67%69%74%68%75%62%2E%69%6F%2F%6A%71%75%65%72%79%2D%66%69%6C%65%2D%62%72%6F%77%73%65%72%2D%61%77%65%73%6F%6D%65%2F%27%20%74%69%74%6C%65%3D%27%6A%51%75%65%72%79%20%46%69%6C%65%20%42%72%6F%77%73%65%72%20%41%77%65%73%6F%6D%65%27%20%73%74%79%6C%65%3D%27%66%6C%6F%61%74%3A%72%69%67%68%74%27%20%74%61%72%67%65%74%3D%27%5F%42%4C%41%4E%4B%27%3E%3C%69%20%63%6C%61%73%73%3D%27%66%61%20%66%61%2D%69%6E%66%6F%2D%63%69%72%63%6C%65%27%3E%3C%2F%69%3E%3C%2F%61%3E%3C%2F%64%69%76%3E') 53 | } 54 | $.each(c.data, function(i, a) { 55 | if (c.data[i].type == "dir") { 56 | r += '
' + c.data[i].name + '
' + c.data[i].items + ' items
' + c.data[i].modif + '
' 57 | } else { 58 | var b = fba_size(c.data[i].size); 59 | var s = c.data[i].path.substr(c.data[i].path.lastIndexOf(".") + 1); 60 | switch (s) { 61 | case "html": 62 | case "php": 63 | case "js": 64 | case "css": 65 | case "txt": 66 | case "md": 67 | case "asp": 68 | case "aspx": 69 | case "jsp": 70 | case "py": 71 | r += '
' + c.data[i].name + '
' + b + '
' + c.data[i].modif + '
'; 72 | break; 73 | case "apk": 74 | r += '
' + b + '
' + c.data[i].modif + '
' 75 | break; 76 | case "pdf": 77 | r += '
' + b + '
' + c.data[i].modif + '
' 78 | break; 79 | default: 80 | r += '
' + b + '
' + c.data[i].modif + '
' 81 | } 82 | } 83 | }); 84 | r += "
"; 85 | $(".fba_direktori").html(r); 86 | $(".sub").click(function() { 87 | var t = $(this).data("sub"); 88 | fba_direktori(t); 89 | window.history.pushState(null, null, "?path=" + t); 90 | return false 91 | }); 92 | $(".bsub").click(function() { 93 | var t = $(this).data("bsub"); 94 | fba_direktori(t); 95 | window.history.pushState(null, null, "?path=" + t); 96 | return false 97 | }); 98 | $(".rfile").click(function() { 99 | var a = $(this).data("rfile"); 100 | fba_file(a); 101 | window.history.pushState(null, null, "?path=" + a); 102 | return false 103 | }) 104 | } 105 | }) 106 | } 107 | 108 | function fba_file(c) { 109 | $.ajax({ 110 | type: "POST", 111 | url: g.host + g.api, 112 | data: 'file=' + c, 113 | crossDomain: true, 114 | dataType: "json" 115 | }).done(function(a) { 116 | if (a.status == 'success') { 117 | $("#rf").html(c); 118 | h.setValue(a.text) 119 | } 120 | }) 121 | } 122 | 123 | function fba_size(e) { 124 | var t = ["Bytes", "KB", "MB", "GB", "TB"]; 125 | if (e == 0) return "0 Bytes"; 126 | var n = parseInt(Math.floor(Math.log(e) / Math.log(1024))); 127 | return Math.round(e / Math.pow(1024, n), 2) + " " + t[n] 128 | } 129 | 130 | function getParameterByName(a) { 131 | a = a.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]"); 132 | var b = new RegExp("[\\?&]" + a + "=([^&#]*)"), 133 | results = b.exec(location.search); 134 | return results === null ? "" : decodeURIComponent(results[1].replace(/\+/g, " ")) 135 | } 136 | } 137 | -------------------------------------------------------------------------------- /fba_api.php: -------------------------------------------------------------------------------- 1 | ('SUB DIR NAME') 17 | $res = $fba->scan($_POST['path']); 18 | 19 | // Output list direktori & file dalam format JSON 20 | echo json_encode($res); 21 | 22 | } 23 | 24 | // Read file 25 | else if(!empty($_POST['file'])){ 26 | 27 | // Jalankan fungsi scan->('SUB DIR NAME') 28 | $res = $fba->read($_POST['file']); 29 | 30 | // Output isi file 31 | echo json_encode($res); 32 | 33 | } 34 | -------------------------------------------------------------------------------- /files/folder1/folder2/awesome.html: -------------------------------------------------------------------------------- 1 | awesome.. 2 | -------------------------------------------------------------------------------- /files/folder1/tes1.html: -------------------------------------------------------------------------------- 1 |

Tes.. 1

2 | -------------------------------------------------------------------------------- /files/tes.html: -------------------------------------------------------------------------------- 1 |

Tes..

2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | jQuery File Browser Awesome - iBacor.com 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 48 | 49 | 50 | 51 | -------------------------------------------------------------------------------- /lib/.htaccess: -------------------------------------------------------------------------------- 1 | Deny from all -------------------------------------------------------------------------------- /lib/fba.php: -------------------------------------------------------------------------------- 1 | path = $path; 15 | } 16 | 17 | // funsi ini untuk mendapatkan jumlah item dalam sebuah folder 18 | private function item($dir){ 19 | 20 | $files = array(); 21 | 22 | if(scandir($dir)){ 23 | foreach(scandir($dir) as $f) { 24 | if(!$f || $f[0] == '.') { 25 | continue; // Abaikan file tersembunyi 26 | } 27 | $files[] = array( 28 | "name" => $f 29 | ); 30 | } 31 | } 32 | 33 | return $files; 34 | } 35 | 36 | // Fungsi ini untuk melihat isi folder 37 | public function scan($path = ''){ 38 | 39 | $files = array(); 40 | 41 | if(preg_match('/\.\./', $path)){ 42 | 43 | $path = ''; 44 | 45 | } 46 | 47 | $files['status'] = 'success'; 48 | 49 | $browser = (empty($path) ? $this->path : $this->path . '/' .$path); 50 | 51 | // Apakah benar-benar terdapat folder/file? 52 | if(file_exists($browser)){ 53 | 54 | $files['status'] = 'success'; 55 | 56 | foreach(scandir($browser) as $f) { 57 | 58 | if(!$f || $f[0] == '.') { 59 | continue; // Abaikan file tersembunyi 60 | } 61 | 62 | if(is_dir($browser . '/' . $f)) { 63 | 64 | // List folder 65 | $files['data'][] = array( 66 | "name" => $f, 67 | "type" => "dir", 68 | "modif" => date('Y-m-d h:i:s',filemtime($browser . '/' . $f)), 69 | "path" => (empty($path) ? $f : $path . '/' .$f), 70 | "items" => count($this->item($browser . '/' . $f)) // Menscan lagi isi folder 71 | ); 72 | } 73 | 74 | else { 75 | 76 | // List file 77 | $files['data'][] = array( 78 | "name" => $f, 79 | "type" => "file", 80 | "dir" => $this->path, 81 | "path" => (empty($path) ? $f : $path . '/' .$f), 82 | "modif" => date('Y-m-d h:i:s',filemtime($browser . '/' . $f)), 83 | "size" => filesize($browser . '/' . $f) // Mendapatkan ukuran file 84 | ); 85 | } 86 | } 87 | 88 | }else{ 89 | $files['status'] = 'error'; 90 | } 91 | 92 | return $files; 93 | } 94 | 95 | // funsi ini untuk melihat isi file 96 | public function read($file){ 97 | 98 | if(preg_match('/\.\./', $file)){ 99 | 100 | return array('status' => 'error'); 101 | 102 | }else{ 103 | 104 | $browser = (empty($file) ? $this->path : $this->path . '/' .$file); 105 | 106 | $text = file_get_contents($browser); 107 | 108 | return array('status' => 'success', 'text' => $text); 109 | 110 | } 111 | } 112 | 113 | } 114 | --------------------------------------------------------------------------------