jQuery-File-Browser-Awesome

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.

USAGE:

CSS

<!-- Include Font Awesome -->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet">
<!-- Codemirror -->
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.min.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/dialog/dialog.min.css">
<!-- Custom Style -->
<link type="text/css" rel="stylesheet" href="asset/css/fba.css" />

HTML

<div id="fba"></div>

JS

<!-- Codemirror -->
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/codemirror.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/xml/xml.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/javascript/javascript.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/css/css.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/mode/htmlmixed/htmlmixed.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/dialog/dialog.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/search/searchcursor.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/codemirror/4.3.0/addon/search/search.min.js"></script>
<!-- Include jQuery -->
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<!-- Include fba.js -->
<script src="asset/js/fba.js"></script>

CONFIG:

1. fba_api.php

// Include class fba.php
include_once('lib/fba.php');
$dir = 'dir1/dir2'; // nama folder yang akan di scan.
$fba =  new fba($dir);

2. Javascript code in your HTML page.

fba({
   host: 'http://your-domain.com/', // your host / domain
   api: 'fba_api.php' // file name fba api
});

DEMO