diff options
Diffstat (limited to 'sites/all/libraries/plupload/examples/jquery')
4 files changed, 443 insertions, 0 deletions
diff --git a/sites/all/libraries/plupload/examples/jquery/all_runtimes.html b/sites/all/libraries/plupload/examples/jquery/all_runtimes.html new file mode 100644 index 000000000..ea44a9ba6 --- /dev/null +++ b/sites/all/libraries/plupload/examples/jquery/all_runtimes.html @@ -0,0 +1,139 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> + +<title>Plupload - Queue widget example</title> + +<link rel="stylesheet" href="../../js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" /> + +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> + +<!-- production --> +<script type="text/javascript" src="../../js/plupload.full.min.js"></script> +<script type="text/javascript" src="../../js/jquery.plupload.queue/jquery.plupload.queue.js"></script> + +<!-- debug +<script type="text/javascript" src="../../js/moxie.js"></script> +<script type="text/javascript" src="../../js/plupload.dev.js"></script> +<script type="text/javascript" src="../../js/jquery.plupload.queue/jquery.plupload.queue.js"></script> +--> + +</head> +<body style="font: 13px Verdana; background: #eee; color: #333"> + +<form method="post" action="dump.php"> + <h1>Queue widget example</h1> + + <p>Shows the jQuery Plupload Queue widget and under different runtimes.</p> + + <div style="float: left; margin-right: 20px"> + <h3>Flash runtime</h3> + <div id="flash_uploader" style="width: 500px; height: 330px;">Your browser doesn't have Flash installed.</div> + + <h3>Silverlight runtime</h3> + <div id="silverlight_uploader" style="width: 500px; height: 330px;">Your browser doesn't have Silverlight installed.</div> + </div> + + <div style="float: left; margin-right: 20px"> + <h3>HTML 4 runtime</h3> + <div id="html4_uploader" style="width: 500px; height: 330px;">Your browser doesn't have HTML 4 support.</div> + + <h3>HTML 5 runtime</h3> + <div id="html5_uploader" style="width: 500px; height: 330px;">Your browser doesn't support native upload.</div> + </div> + + <br style="clear: both" /> + + <input type="submit" value="Send" /> +</form> + +<script type="text/javascript"> +$(function() { + // Setup flash version + $("#flash_uploader").pluploadQueue({ + // General settings + runtimes : 'flash', + url : '../upload.php', + chunk_size : '1mb', + unique_names : true, + + filters : { + max_file_size : '10mb', + mime_types: [ + {title : "Image files", extensions : "jpg,gif,png"}, + {title : "Zip files", extensions : "zip"} + ] + }, + + // Resize images on clientside if we can + resize : {width : 320, height : 240, quality : 90}, + + // Flash settings + flash_swf_url : '../../js/Moxie.swf' + }); + + + // Setup silverlight version + $("#silverlight_uploader").pluploadQueue({ + // General settings + runtimes : 'silverlight', + url : '../upload.php', + chunk_size : '1mb', + unique_names : true, + + filters : { + max_file_size : '10mb', + mime_types: [ + {title : "Image files", extensions : "jpg,gif,png"}, + {title : "Zip files", extensions : "zip"} + ] + }, + + // Resize images on clientside if we can + resize : {width : 320, height : 240, quality : 90}, + + // Silverlight settings + silverlight_xap_url : '../../js/Moxie.xap' + }); + + // Setup html5 version + $("#html5_uploader").pluploadQueue({ + // General settings + runtimes : 'html5', + url : '../upload.php', + chunk_size : '1mb', + unique_names : true, + + filters : { + max_file_size : '10mb', + mime_types: [ + {title : "Image files", extensions : "jpg,gif,png"}, + {title : "Zip files", extensions : "zip"} + ] + }, + + // Resize images on clientside if we can + resize : {width : 320, height : 240, quality : 90} + }); + + + // Setup html4 version + $("#html4_uploader").pluploadQueue({ + // General settings + runtimes : 'html4', + url : '../upload.php', + unique_names : true, + + filters : { + mime_types: [ + {title : "Image files", extensions : "jpg,gif,png"}, + {title : "Zip files", extensions : "zip"} + ] + } + }); +}); +</script> + +</body> +</html> diff --git a/sites/all/libraries/plupload/examples/jquery/jquery_ui_widget.html b/sites/all/libraries/plupload/examples/jquery/jquery_ui_widget.html new file mode 100644 index 000000000..1beb6c152 --- /dev/null +++ b/sites/all/libraries/plupload/examples/jquery/jquery_ui_widget.html @@ -0,0 +1,113 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> + +<title>Plupload - jQuery UI Widget</title> + +<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" /> +<link rel="stylesheet" href="../../js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" /> + +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> +<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> + +<!-- production --> +<script type="text/javascript" src="../../js/plupload.full.min.js"></script> +<script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script> + +<!-- debug +<script type="text/javascript" src="../../js/moxie.js"></script> +<script type="text/javascript" src="../../js/plupload.dev.js"></script> +<script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script> +--> + +</head> +<body style="font: 13px Verdana; background: #eee; color: #333"> + +<h1>jQuery UI Widget</h1> + +<p>You can see this example with different themes on the <a href="http://plupload.com/example_jquery_ui.php">www.plupload.com</a> website.</p> + +<form id="form" method="post" action="../dump.php"> + <div id="uploader"> + <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p> + </div> + <br /> + <input type="submit" value="Submit" /> +</form> + +<script type="text/javascript"> +// Initialize the widget when the DOM is ready +$(function() { + $("#uploader").plupload({ + // General settings + runtimes : 'html5,flash,silverlight,html4', + url : '../upload.php', + + // User can upload no more then 20 files in one go (sets multiple_queues to false) + max_file_count: 20, + + chunk_size: '1mb', + + // Resize images on clientside if we can + resize : { + width : 200, + height : 200, + quality : 90, + crop: true // crop to exact dimensions + }, + + filters : { + // Maximum file size + max_file_size : '1000mb', + // Specify what files to browse for + mime_types: [ + {title : "Image files", extensions : "jpg,gif,png"}, + {title : "Zip files", extensions : "zip"} + ] + }, + + // Rename files by clicking on their titles + rename: true, + + // Sort files + sortable: true, + + // Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that) + dragdrop: true, + + // Views to activate + views: { + list: true, + thumbs: true, // Show thumbs + active: 'thumbs' + }, + + // Flash settings + flash_swf_url : '../../js/Moxie.swf', + + // Silverlight settings + silverlight_xap_url : '../../js/Moxie.xap' + }); + + + // Handle the case when form was submitted before uploading has finished + $('#form').submit(function(e) { + // Files in queue upload them first + if ($('#uploader').plupload('getFiles').length > 0) { + + // When all files are uploaded submit form + $('#uploader').on('complete', function() { + $('#form')[0].submit(); + }); + + $('#uploader').plupload('start'); + } else { + alert("You must have at least one file in the queue."); + } + return false; // Keep the form from submitting + }); +}); +</script> +</body> +</html> diff --git a/sites/all/libraries/plupload/examples/jquery/queue_widget.html b/sites/all/libraries/plupload/examples/jquery/queue_widget.html new file mode 100644 index 000000000..485528706 --- /dev/null +++ b/sites/all/libraries/plupload/examples/jquery/queue_widget.html @@ -0,0 +1,66 @@ +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> + +<title>Plupload - Queue widget example</title> + +<link rel="stylesheet" href="../../js/jquery.plupload.queue/css/jquery.plupload.queue.css" type="text/css" media="screen" /> + +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> + +<!-- production --> +<script type="text/javascript" src="../../js/plupload.full.min.js"></script> +<script type="text/javascript" src="../../js/jquery.plupload.queue/jquery.plupload.queue.js"></script> + +<!-- debug +<script type="text/javascript" src="../../js/moxie.js"></script> +<script type="text/javascript" src="../../js/plupload.dev.js"></script> +<script type="text/javascript" src="../../js/jquery.plupload.queue/jquery.plupload.queue.js"></script> +--> + + +</head> +<body style="font: 13px Verdana; background: #eee; color: #333"> + +<form method="post" action="dump.php"> + <div id="uploader"> + <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p> + </div> + <input type="submit" value="Send" /> +</form> + +<script type="text/javascript"> +$(function() { + + // Setup html5 version + $("#uploader").pluploadQueue({ + // General settings + runtimes : 'html5,flash,silverlight,html4', + url : '../upload.php', + chunk_size: '1mb', + rename : true, + dragdrop: true, + + filters : { + // Maximum file size + max_file_size : '10mb', + // Specify what files to browse for + mime_types: [ + {title : "Image files", extensions : "jpg,gif,png"}, + {title : "Zip files", extensions : "zip"} + ] + }, + + // Resize images on clientside if we can + resize : {width : 320, height : 240, quality : 90}, + + flash_swf_url : '../../js/Moxie.swf', + silverlight_xap_url : '../../js/Moxie.xap' + }); + +}); +</script> + +</body> +</html> diff --git a/sites/all/libraries/plupload/examples/jquery/s3.php b/sites/all/libraries/plupload/examples/jquery/s3.php new file mode 100644 index 000000000..a46f1dbc6 --- /dev/null +++ b/sites/all/libraries/plupload/examples/jquery/s3.php @@ -0,0 +1,125 @@ +<?php +/* +In order to upload files to S3 using Flash runtime, one should start by placing crossdomain.xml into the bucket. +crossdomain.xml can be as simple as this: + +<?xml version="1.0"?> +<!DOCTYPE cross-domain-policy SYSTEM "http://www.macromedia.com/xml/dtds/cross-domain-policy.dtd"> +<cross-domain-policy> +<allow-access-from domain="*" secure="false" /> +</cross-domain-policy> + +In our tests SilverLight didn't require anything special and worked with this configuration just fine. It may fail back +to the same crossdomain.xml as last resort. + +!!!Important!!! Plupload UI Widget here, is used only for demo purposes and is not required for uploading to S3. +*/ + +// important variables that will be used throughout this example +$bucket = 'BUCKET'; + +// these can be found on your Account page, under Security Credentials > Access Keys +$accessKeyId = 'ACCESS_KEY_ID'; +$secret = 'SECRET_ACCESS_KEY'; + +// prepare policy +$policy = base64_encode(json_encode(array( + // ISO 8601 - date('c'); generates uncompatible date, so better do it manually + 'expiration' => date('Y-m-d\TH:i:s.000\Z', strtotime('+1 day')), + 'conditions' => array( + array('bucket' => $bucket), + array('acl' => 'public-read'), + array('starts-with', '$key', ''), + // for demo purposes we are accepting only images + array('starts-with', '$Content-Type', 'image/'), + // Plupload internally adds name field, so we need to mention it here + array('starts-with', '$name', ''), + // One more field to take into account: Filename - gets silently sent by FileReference.upload() in Flash + // http://docs.amazonwebservices.com/AmazonS3/latest/dev/HTTPPOSTFlash.html + array('starts-with', '$Filename', ''), + ) +))); + +// sign policy +$signature = base64_encode(hash_hmac('sha1', $policy, $secret, true)); + +?> +<!DOCTYPE html> +<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr"> +<head> +<meta http-equiv="content-type" content="text/html; charset=UTF-8"/> + +<title>Plupload to Amazon S3 Example</title> + +<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/themes/base/jquery-ui.css" type="text/css" /> +<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> +<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script> + +<!-- Load plupload and all it's runtimes and finally the UI widget --> +<link rel="stylesheet" href="../../js/jquery.ui.plupload/css/jquery.ui.plupload.css" type="text/css" /> + + +<!-- production --> +<script type="text/javascript" src="../../js/plupload.full.min.js"></script> +<script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script> + +<!-- debug +<script type="text/javascript" src="../../js/moxie.js"></script> +<script type="text/javascript" src="../../js/plupload.dev.js"></script> +<script type="text/javascript" src="../../js/jquery.ui.plupload/jquery.ui.plupload.js"></script> +--> + +</head> +<body style="font: 13px Verdana; background: #eee; color: #333"> + +<h1>Plupload to Amazon S3 Example</h1> + +<div id="uploader"> + <p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p> +</div> + +<script type="text/javascript"> +// Convert divs to queue widgets when the DOM is ready +$(function() { + $("#uploader").plupload({ + runtimes : 'html5,flash,silverlight', + url : 'http://<?php echo $bucket; ?>.s3.amazonaws.com/', + + multipart: true, + multipart_params: { + 'key': '${filename}', // use filename as a key + 'Filename': '${filename}', // adding this to keep consistency across the runtimes + 'acl': 'public-read', + 'Content-Type': 'image/jpeg', + 'AWSAccessKeyId' : '<?php echo $accessKeyId; ?>', + 'policy': '<?php echo $policy; ?>', + 'signature': '<?php echo $signature; ?>' + }, + + // !!!Important!!! + // this is not recommended with S3, since it will force Flash runtime into the mode, with no progress indication + //resize : {width : 800, height : 600, quality : 60}, // Resize images on clientside, if possible + + // optional, but better be specified directly + file_data_name: 'file', + + filters : { + // Maximum file size + max_file_size : '10mb', + // Specify what files to browse for + mime_types: [ + {title : "Image files", extensions : "jpg,jpeg"} + ] + }, + + // Flash settings + flash_swf_url : '../../js/Moxie.swf', + + // Silverlight settings + silverlight_xap_url : '../../js/Moxie.xap' + }); +}); +</script> + +</body> +</html> |