- S3 upload -
S3Upload is an
add-on to upload files and folders to Amazon S3
(Simple Storage Service). To enable S3 upload you need
to:
- Define at least the following regular and extra
parameters to make it works.
- Enable CORS POST
support for your S3 bucket to allow browser to
upload to AWS end-point.
- Define your S3
POST upload policy and pass it to S3 uploader
as extra parameters below.
Notice that resume and overwrite features cannot be
used with S3 POST upload (not supported by AWS).
chunksize which is also used for resume cannot be used
either.
Parameters |
Description and
example |
Mandatory |
addon |
Add-on string that enables S3 upload.
addons:
["s3upload"]
|
yes |
paramfile |
This string parameter matches to input
file HTML form field needed for upload.
"file" is required for S3 instead of
"uploadfile" which is the default.
paramfile
: "file"
|
yes |
url |
Amazon S3 URL string that will process
the upload to your bucket. Additional
query string is not allowed.
url :
"https://yourbucket.s3.amazonaws.com"
|
yes |
|
Extra parameter is defined by a pair paramX:
paramname, valueX: value (with X in [1,24]). A few
extra parameters below are reserved:
Extra
parameters |
Description and
example |
Mandatory |
relativefilename |
This parameter must be
enabled.
param1 :
"relativefilename",
value1 : "true"
|
yes
|
AWSAccessKeyId |
This string parameter is your AWS
Access Key Identifier (not secret key)
with write permission on your bucket.
param2 :
"AWSAccessKeyId",
value2 : "YOURAWSKEYID"
|
yes |
Policy |
This parameter allows
passing your S3 policy for POST upload.
param3 :
"Policy",
value3 : "AWSPOLICYGENERATED"
|
yes |
Signature |
This parameter allows
passing signature of the S3 policy
above.
param4 :
"Signature",
value4 : "AWSSIGNATUREGENERATED"
|
yes |
encodeheaders |
This parameter is not
supported by Amazon S3. Make sure to set
it to false.
param5 :
"encodeheaders",
value5 : "false"
|
yes
|
acl |
This parameter allows
passing acl for uploaded files. When
used it must be defined in S3 policy
too.
param6 :
"acl",
value6 : "public-read"
|
no |
account |
This parameter allow
passing initial subfolder(s) for uploads.
param7 :
"account",
value7 : "subfolder/customer1"
|
no |
|
HTML and JavaScript declaration
example |
Hereafter the code you need to
copy/paste in your HTML source to use file uploader
with S3. "jfucontainer" DIV is the place where the
uploader will be displayed. You can include it
anywhere in your HTML page.
<html>
<head>
<meta charset="UTF-8"/>
<link type="text/css"
rel="stylesheet" href="css/style.css"
/>
<link rel="prefetch" href="img/icons.png"/>
</head>
<body>
<div
id="jfucontainer" style="width:500px;">
<!-- UI will
be inserted here automatically -->
</div>
<br/>
<script type="text/javascript"
src="js/fileupload.min.js"></script>
<!-- Start your
code here -->
<script>
// Setup some
parameters
var params
= {
/* Regular
parameters */
url:
"http://yourbucket.s3.amazonaws.com",
paramfile : "file",
maxfilesize : 1048576 *
500,
maxfiles : 50,
maxsize : 1048576 * 1000,
retry : 3,
retrydelay : 2,
folderdepth : -1,
resetprogressbar : true,
policy : "ignore",
addon : "s3upload",
/* Extra
parameters */
param1 :
"relativefilename",
value1 : "true",
param2 : "AWSAccessKeyId",
value2 : "YOURAWSKEYID",
param3 : "Policy",
value3 :
"AWSPOLICYGENERATED",
param4 : "Signature",
value4 :
"AWSSIGNATUREGENERATED",
param5 : "emptydirectory",
value5 : "true",
param6 : "encodeheaders",
value6 : "false",
loglevel : 1
};
// Create your
instance of JFileUpload.
//
"jfucontainer" is DIV identifier where you
want it to be displayed.
var jfu
= new JFU("jfucontainer", params);
// Initialize
if (jfu.allFeaturesSupport() === true)
{
// Display
now
jfu.initialize();
}
else {
// Browser
not supported
var jfucontainer =
document.getElementById("jfucontainer");
jfucontainer.innerHTML =
"<h2>Browser not supported</h2>";
}
</script>
<!-- End
your code here -->
<br/>
</body>
</html>
|
|