PHP Amazon S3 Explorer

A) HTML Structure

This widget is two column lay out . The main content area is nested within a div with an id of "folder-structure". The sidebar's (column #2) content is within a div with an id of "preview-content".

The theme comes in default blue

/* === Header Section === */

some code

/* === Main Section === */

some code

/* === Sidebar Section === */

some code

B) CSS Files and Structure

We are using one CSS file in this theme i.e style.css which resides in 'css' folder. Other css files in folder are Extjs and jQuery ui plugin css files.

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

C) Javascript

This script uses following plugins.

  • jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  • Sencha Ext JS is the industry's most powerful desktop application development platform with unparalleled cross-browser compatibility, advanced MVC architecture, plugin-free charting, and modern UI widgets
  • In addition to plugins and framework, we used Amazon s3 api to upload, download files and browse folders

D) PHP Code Explanation

I have written one PHP class which do all functionality i.e classes/

  • All request from javascript are forwarded to doajax.php with different paramters.
  • aws.phar is library provided by amazon which provide methods to communicate with s3.

E) Configuration

Configuration file reside in root folder i.e

  • You have to change following configuration options to access your bucket :
    • define('AMAZON_S3_PRODUCT_IMAGES_BUCKET','Enter you bucket name here');
    • define('AMAZON_S3_KEY','Enter your s3 key here');
    • define('AMAZON_S3_SECRET','Enter your s3 secret here');
  • If you want to access s3 bucket using ssl then remove '//' comments from this line and add your ssl certificate name .
  • //$client->setSslVerification(dirname(__DIR__).'Enter you certificate name here i.e abc.pem', 0);

C) Features

1) Browse Files

Provide list of existing files and selection by pressing the upload button.

2) Preview Image

Preview the image of the selected file.

3) File Options

4) Folder Options

5) Upload File