- 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:

  1. Define at least the following regular and extra parameters to make it works.
  2. Enable CORS POST support for your S3 bucket to allow browser to upload to AWS end-point.
  3. 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.

Regular parameters
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
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>