Multiple Images Upload to Amazon S3 using PHP & jQuery

I am going to explain jQuery Multiple File upload to Amazon S3 bucket without refreshing a page using PHP & jQuery. Most of the social networking sites are storing files/images in Amazon servers only. Let me explain why do we need Amazon S3

Amazon S3 (Simple Storage Service) is an online service provided by Amazon.com, that allows web designers to store large amounts of data online. Amazon has also built the S3 service to be very reliable, and guarantees server uptime of 99.99%.

There are so many tools are available to upload files to Amazon S3 server like Amazon S3Fox

Advantages of storing files in Amazon S3 over server hard disk

• Storage Cost is very less
• Data retrival is very fast
• Data stored in Amazon Cloud
• More Private

Now we are going to see jQuery multiple file upload to S3 with PHP

We need Amazon AWS Access key & Secret Key to upload files. So Login to Amazon account and click here to get AWS Access Credentials.

After login to Amazon account – you have to create a Bucket & assign a permission to Everyone to Read in Properties Tab

Once created, You have to provide Amazon Key details in config.php

Config.php

//Bucket Name

$bucket_name ="your bucket name";

//include the S3 class

if (!class_exists('S3'))require_once('S3.php');
//AWS access informations

if (!defined('awsAccessKey')) define('awsAccessKey', 'access key');

if (!defined('awsSecretKey')) define('awsSecretKey', 'secret key');
//instantiate the s3 class

$s3 = new S3(awsAccessKey, awsSecretKey);
//this is used to create a bucket in amazon S3

$s3->putBucket($bucket_name, S3::ACL_PUBLIC_READ);

You can modify the permissions easily by replacing with below code

• ACL_PRIVATE
• ACL_PUBLIC_READ
• ACL_PUBLIC_READ_WRITE
• ACL_AUTHENTICATED_READ – used to create presigned object url for authenticated access

Upload.php

if(isset($_POST) && !empty($_FILES) && !empty($_FILES['uploadfile']['name'])) {

//upload file formats

$valid_file_formats = array("jpg", "png", "gif", "bmp","jpeg","PNG","JPG","JPEG","GIF","BMP");
function get_file_extension($file_name) {

	return substr(strrchr($file_name,'.'),1);

}
$filename = $_FILES['uploadfile']['name'];

$tmp_filename = $_FILES['uploadfile']['tmp_name'];

$filetype = strtolower($_FILES['uploadfile']['type']);

//get file extenstion to verify the format

$extension = get_file_extension($filename);
if(in_array($extension,$valid_file_formats))

{

	//include config.php

	include_once "config.php";
  
 

	//set content type in headers inorder to display image in browser

	$header = array('Content-Type' => $filetype);
	//change filename

	$new_file_name = "w3_".time().".".$extension;

	if($s3->putObject(S3::inputFile($tmp_filename), $bucket_name , $new_file_name, S3::ACL_PUBLIC_READ, array(), $header) )

	{

		$img = "http://".$bucket_name.".s3.amazonaws.com/".$new_file_name;

		echo "1-".$img;

	} else {

		echo "2-Upload Failed";

	}

} else {

	echo "3-Not a Valid Format";

}

} else {

	echo "4-Please Select a File";

}

jQuery Code

jQuery(document).ready(function(){

		var btnUpload=jQuery('#upload_pic');

		var status=jQuery('#statuss');

		new AjaxUpload(btnUpload, {

			action: 'upload.php',

			name: 'uploadfile',

			onSubmit: function(file, ext){

				 if (! (ext && /^(jpg|jpeg|gif|png)$/.test(ext))){

                    // extension is not allowed

					status.text('Only JPG or GIF or PNG files are allowed');

					return false;

				}

				status.text('Uploading...');

			},

			onComplete: function(file, response){

				//On completion clear the status

				status.text('');

				//split the response

				var resp = response.split('-');

				//Add uploaded file to list

				if(resp[0] == 1){

					//store image

					var img = resp[1];

					var apic = jQuery('#imgs').val();

                                        //uploaded images are stored in hidden text box for future reference

					jQuery('#imgs').val(img+','+apic);

					jQuery('#files').append('<img src="'+img+'" height="150" width="150">');

				} else {

					jQuery('#files').text(resp[1]).addClass('error');

				}

			}

		});

});

Please don’t forget to share and subscribe to latest updates of the blog. Also any comments and feedback are all welcome!

Thanks!