Amazon Simple Storage Service (Amazon S3) is a mainstream web benefits that gives exceptionally adaptable, solid and secure stockpiling. Right now a large portion of us utilize server side answers for transfer records to Amazon S3 server. There are likewise AWS SDK for JavaScript to transfer documents to Amazon S3 server from customer side. Transferring records from customer side is speedier than server side and best for huge documents. So in this instructional exercise you will figure out how to transfer documents to Amazon S3 server utilizing JavaScript. The instructional exercise clarified in simple strides with live demo to transfer documents to Amazon S3 server. You can likewise download source code of live demo.
As we have secured this instructional exercise with live demo to transfer documents to Amazon s3 server with JavaScript, so the record structure for this case is following.
step by step code Here
step 1 create index.php
<?php
include(‘header.php’);
?>
<title>phpcode : Demo Amazon S3 File Upload using JavaScript</title>
<script src=”https://sdk.amazonaws.com/js/aws-sdk-2.1.24.min.js”></script>
<script src=”aws_config.js”></script>
<script src=”s3_upload.js”></script>
<?php include(‘container.php’);?>
<div class=”container”>
<h2>Amazon S3 File Upload using JavaScript</h2>
<br>
<form id=”uploadForm” method=’post’ enctype=”multipart/form-data”>
<h3>Upload File</h3><br/>
<span id=”showMessage” style=”display:none;color:red;”>File uploaded to Amazon server.</span>
<input type=’file’ name=”upFile” id=”upFile” required=”” />
<br>
<input type=’submit’ value=’Upload’/>
</form>
<div style=”margin:50px 0px 0px 0px;”>
<a class=”btn btn-default read-more” style=”background:#3399ff;color:white” href=”#”>Back</a>
</div>
</div>
<?php include(‘footer.php’);?>
step 2 created header.php
<!DOCTYPE html>
<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>
<!– jQuery –>
step 3 created footer.php
<div class=”insert-post-ads1″ style=”margin-top:20px;”>
</div>
</div>
</body></html>
step 4 created container.php
</head>
<body class=””>
<div role=”navigation” class=”navbar navbar-default navbar-static-top”>
<div class=”container”>
<div class=”navbar-header”>
<button data-target=”.navbar-collapse” data-toggle=”collapse” class=”navbar-toggle” type=”button”>
<span class=”sr-only”>#</span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
<span class=”icon-bar”></span>
</button>
<a href=”#” class=”navbar-brand”>PHPCODE</a>
</div>
<div class=”navbar-collapse collapse”>
<ul class=”nav navbar-nav”>
<li class=”active”><a href=”#”>Home</a></li>
</ul>
</div><!–/.nav-collapse –>
</div>
</div>
<div class=”container” style=”min-height:500px;”>
<div class=”>
</div>
step 5 created s3_upload.js
$( document ).ready(function() {
$(“#uploadForm”).submit(function() {
var bucket = new AWS.S3({params: {Bucket: ‘BUCKET_NAME’}});
var uploadFiles = $(‘#upFile’)[0];
var upFile = uploadFiles.files[0];
if (upFile) {
var uploadParams = {Key: upFile.name, ContentType: upFile.type, Body: upFile};
bucket.upload(uploadParams).on(‘httpUploadProgress’, function(evt) {
//console.log(“File Uploading: ” + parseInt((evt.loaded * 100) / evt.total)+’%’);
}).send(function(err, data) {
$(‘#upFile’).val(null);
$(“#showMessage”).show();
});
}
return false;
});
});
step 6 created aws_config.js
//AWS access info
AWS.config.update({
accessKeyId : ‘ACCESS_KEY’,
secretAccessKey : ‘SECRET_KEY’
});
AWS.config.region = ‘YOUR REGION’;