WebdesignPix: Cute File Browser with jQuery and PHP

Today we want to share a cool experiment with you. It is a cute file browser, 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 and jQuery and uses CSS3 extensively – no images or icons were used in the design, and the animations are smooth and work well even on smartphones.

How to use it on your site

Go ahead and grab the zip file from the download button above. Unzip it, then upload it to your server. The folder files is where you should place everything that you wish to share. No further set up necessary – the script doesn’t use a database and no configuration is needed.

Cute file browser

The idea

If you wish to learn more about how it works, here is a high-level overview of the functionality:

A PHP script – scan.php – scans the files folder and returns all files and folders as a single JSON object.

Our JavaScript code, with the help of jQuery, takes this JSON, and turns it into a grid of files and folders. Clicking a folder re-renders the view with its contents.

Because there is only one request to the backend involved, browsing through the file list and searching is instantaneous. We also update the URL and use the hashchange event to monitor for navigation using the back/forward buttons.

We invite you to play with the code – it has lots of comments and is relatively easy to follow.

Forcing files to download

Browsers open text files instead of downloading them. If you wish to force all files to download, place this .htaccess file in the files folder:

<Files *.*>
ForceType application/octet-stream
</Files>

It should be called .htaccess (with a leading dot). This file is only supported on Apache web servers.

The design

The PSD for the design is available for free to all of our newsletter subscribers! Join or login from here to download it.

We hope that you find our file manager useful! There are lots of cool things that can be added to it, like browsing photos in a lightbox, playing back audio and video, and even enhancing it with file management features and uploads. We’d love to see what you come up with!