PHP Amazon S3 Explorer
Table of Contents
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
/* === Main Section === */
/* === Sidebar Section === */
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.
This script uses following plugins.
- 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/clsAmazons3.class.inc
- aws.phar is library provided by amazon which provide methods to communicate with s3.
Configuration file reside in root folder i.e config.Site.inc
- 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);
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.