Plupload library upgraded to v2.3.6
|
Before Width: | Height: | Size: 2.9 KiB |
|
Before Width: | Height: | Size: 1.3 KiB |
|
Before Width: | Height: | Size: 1.4 KiB |
|
Before Width: | Height: | Size: 180 B |
|
Before Width: | Height: | Size: 1.0 KiB |
|
Before Width: | Height: | Size: 994 B |
|
Before Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 399 B |
@ -1,85 +0,0 @@
|
||||
<!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 - Custom example</title>
|
||||
|
||||
<!-- production -->
|
||||
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
|
||||
|
||||
|
||||
<!-- debug
|
||||
<script type="text/javascript" src="../js/moxie.js"></script>
|
||||
<script type="text/javascript" src="../js/plupload.dev.js"></script>
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body style="font: 13px Verdana; background: #eee; color: #333">
|
||||
|
||||
<h1>Custom example</h1>
|
||||
|
||||
<p>Shows you how to use the core plupload API.</p>
|
||||
|
||||
<div id="filelist">Your browser doesn't have Flash, Silverlight or HTML5 support.</div>
|
||||
<br />
|
||||
|
||||
<div id="container">
|
||||
<a id="pickfiles" href="javascript:;">[Select files]</a>
|
||||
<a id="uploadfiles" href="javascript:;">[Upload files]</a>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<pre id="console"></pre>
|
||||
|
||||
|
||||
<script type="text/javascript">
|
||||
// Custom example logic
|
||||
|
||||
var uploader = new plupload.Uploader({
|
||||
runtimes : 'html5,flash,silverlight,html4',
|
||||
browse_button : 'pickfiles', // you can pass an id...
|
||||
container: document.getElementById('container'), // ... or DOM Element itself
|
||||
url : 'upload.php',
|
||||
flash_swf_url : '../js/Moxie.swf',
|
||||
silverlight_xap_url : '../js/Moxie.xap',
|
||||
|
||||
filters : {
|
||||
max_file_size : '10mb',
|
||||
mime_types: [
|
||||
{title : "Image files", extensions : "jpg,gif,png"},
|
||||
{title : "Zip files", extensions : "zip"}
|
||||
]
|
||||
},
|
||||
|
||||
init: {
|
||||
PostInit: function() {
|
||||
document.getElementById('filelist').innerHTML = '';
|
||||
|
||||
document.getElementById('uploadfiles').onclick = function() {
|
||||
uploader.start();
|
||||
return false;
|
||||
};
|
||||
},
|
||||
|
||||
FilesAdded: function(up, files) {
|
||||
plupload.each(files, function(file) {
|
||||
document.getElementById('filelist').innerHTML += '<div id="' + file.id + '">' + file.name + ' (' + plupload.formatSize(file.size) + ') <b></b></div>';
|
||||
});
|
||||
},
|
||||
|
||||
UploadProgress: function(up, file) {
|
||||
document.getElementById(file.id).getElementsByTagName('b')[0].innerHTML = '<span>' + file.percent + "%</span>";
|
||||
},
|
||||
|
||||
Error: function(up, err) {
|
||||
document.getElementById('console').appendChild(document.createTextNode("\nError #" + err.code + ": " + err.message));
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
uploader.init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,27 +0,0 @@
|
||||
<!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 - Form dump</title>
|
||||
</head>
|
||||
<body style="font: 13px Verdana; background: #eee; color: #333">
|
||||
|
||||
<h1>Post dump</h1>
|
||||
|
||||
<p>Shows the form items posted.</p>
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Value</th>
|
||||
</tr>
|
||||
<?php $count = 0; foreach ($_POST as $name => $value) { ?>
|
||||
<tr class="<?php echo $count % 2 == 0 ? 'alt' : ''; ?>">
|
||||
<td><?php echo htmlentities(stripslashes($name)) ?></td>
|
||||
<td><?php echo nl2br(htmlentities(stripslashes($value))) ?></td>
|
||||
</tr>
|
||||
<?php } ?>
|
||||
</table>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
@ -1,217 +0,0 @@
|
||||
<!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 - Events example</title>
|
||||
|
||||
<!-- production -->
|
||||
<script type="text/javascript" src="../js/plupload.full.min.js"></script>
|
||||
|
||||
|
||||
<!-- debug
|
||||
<script type="text/javascript" src="../js/moxie.js"></script>
|
||||
<script type="text/javascript" src="../js/plupload.dev.js"></script>
|
||||
-->
|
||||
|
||||
</head>
|
||||
<body style="font: 13px Verdana; background: #eee; color: #333">
|
||||
|
||||
<h1>Events example</h1>
|
||||
|
||||
<div id="container">
|
||||
<a id="pickfiles" href="javascript:;">[Select files]</a>
|
||||
<a id="uploadfiles" href="javascript:;">[Upload files]</a>
|
||||
</div>
|
||||
|
||||
<br />
|
||||
<pre id="console"></pre>
|
||||
|
||||
<script type="text/javascript">
|
||||
var uploader = new plupload.Uploader({
|
||||
// General settings
|
||||
runtimes : 'silverlight,html4',
|
||||
browse_button : 'pickfiles', // you can pass in id...
|
||||
url : 'upload.php',
|
||||
chunk_size : '1mb',
|
||||
unique_names : true,
|
||||
|
||||
// Resize images on client-side if we can
|
||||
resize : { width : 320, height : 240, quality : 90 },
|
||||
|
||||
filters : {
|
||||
max_file_size : '10mb',
|
||||
|
||||
// Specify what files to browse for
|
||||
mime_types: [
|
||||
{title : "Image files", extensions : "jpg,gif,png"},
|
||||
{title : "Zip files", extensions : "zip"}
|
||||
]
|
||||
},
|
||||
|
||||
flash_swf_url : '../js/Moxie.swf',
|
||||
silverlight_xap_url : '../js/Moxie.xap',
|
||||
|
||||
// PreInit events, bound before the internal events
|
||||
preinit : {
|
||||
Init: function(up, info) {
|
||||
log('[Init]', 'Info:', info, 'Features:', up.features);
|
||||
},
|
||||
|
||||
UploadFile: function(up, file) {
|
||||
log('[UploadFile]', file);
|
||||
|
||||
// You can override settings before the file is uploaded
|
||||
// up.setOption('url', 'upload.php?id=' + file.id);
|
||||
// up.setOption('multipart_params', {param1 : 'value1', param2 : 'value2'});
|
||||
}
|
||||
},
|
||||
|
||||
// Post init events, bound after the internal events
|
||||
init : {
|
||||
PostInit: function() {
|
||||
// Called after initialization is finished and internal event handlers bound
|
||||
log('[PostInit]');
|
||||
|
||||
document.getElementById('uploadfiles').onclick = function() {
|
||||
uploader.start();
|
||||
return false;
|
||||
};
|
||||
},
|
||||
|
||||
Browse: function(up) {
|
||||
// Called when file picker is clicked
|
||||
log('[Browse]');
|
||||
},
|
||||
|
||||
Refresh: function(up) {
|
||||
// Called when the position or dimensions of the picker change
|
||||
log('[Refresh]');
|
||||
},
|
||||
|
||||
StateChanged: function(up) {
|
||||
// Called when the state of the queue is changed
|
||||
log('[StateChanged]', up.state == plupload.STARTED ? "STARTED" : "STOPPED");
|
||||
},
|
||||
|
||||
QueueChanged: function(up) {
|
||||
// Called when queue is changed by adding or removing files
|
||||
log('[QueueChanged]');
|
||||
},
|
||||
|
||||
OptionChanged: function(up, name, value, oldValue) {
|
||||
// Called when one of the configuration options is changed
|
||||
log('[OptionChanged]', 'Option Name: ', name, 'Value: ', value, 'Old Value: ', oldValue);
|
||||
},
|
||||
|
||||
BeforeUpload: function(up, file) {
|
||||
// Called right before the upload for a given file starts, can be used to cancel it if required
|
||||
log('[BeforeUpload]', 'File: ', file);
|
||||
},
|
||||
|
||||
UploadProgress: function(up, file) {
|
||||
// Called while file is being uploaded
|
||||
log('[UploadProgress]', 'File:', file, "Total:", up.total);
|
||||
},
|
||||
|
||||
FileFiltered: function(up, file) {
|
||||
// Called when file successfully files all the filters
|
||||
log('[FileFiltered]', 'File:', file);
|
||||
},
|
||||
|
||||
FilesAdded: function(up, files) {
|
||||
// Called when files are added to queue
|
||||
log('[FilesAdded]');
|
||||
|
||||
plupload.each(files, function(file) {
|
||||
log(' File:', file);
|
||||
});
|
||||
},
|
||||
|
||||
FilesRemoved: function(up, files) {
|
||||
// Called when files are removed from queue
|
||||
log('[FilesRemoved]');
|
||||
|
||||
plupload.each(files, function(file) {
|
||||
log(' File:', file);
|
||||
});
|
||||
},
|
||||
|
||||
FileUploaded: function(up, file, info) {
|
||||
// Called when file has finished uploading
|
||||
log('[FileUploaded] File:', file, "Info:", info);
|
||||
},
|
||||
|
||||
ChunkUploaded: function(up, file, info) {
|
||||
// Called when file chunk has finished uploading
|
||||
log('[ChunkUploaded] File:', file, "Info:", info);
|
||||
},
|
||||
|
||||
UploadComplete: function(up, files) {
|
||||
// Called when all files are either uploaded or failed
|
||||
log('[UploadComplete]');
|
||||
},
|
||||
|
||||
Destroy: function(up) {
|
||||
// Called when uploader is destroyed
|
||||
log('[Destroy] ');
|
||||
},
|
||||
|
||||
Error: function(up, args) {
|
||||
// Called when error occurs
|
||||
log('[Error] ', args);
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
|
||||
function log() {
|
||||
var str = "";
|
||||
|
||||
plupload.each(arguments, function(arg) {
|
||||
var row = "";
|
||||
|
||||
if (typeof(arg) != "string") {
|
||||
plupload.each(arg, function(value, key) {
|
||||
// Convert items in File objects to human readable form
|
||||
if (arg instanceof plupload.File) {
|
||||
// Convert status to human readable
|
||||
switch (value) {
|
||||
case plupload.QUEUED:
|
||||
value = 'QUEUED';
|
||||
break;
|
||||
|
||||
case plupload.UPLOADING:
|
||||
value = 'UPLOADING';
|
||||
break;
|
||||
|
||||
case plupload.FAILED:
|
||||
value = 'FAILED';
|
||||
break;
|
||||
|
||||
case plupload.DONE:
|
||||
value = 'DONE';
|
||||
break;
|
||||
}
|
||||
}
|
||||
|
||||
if (typeof(value) != "function") {
|
||||
row += (row ? ', ' : '') + key + '=' + value;
|
||||
}
|
||||
});
|
||||
|
||||
str += row + " ";
|
||||
} else {
|
||||
str += arg + " ";
|
||||
}
|
||||
});
|
||||
|
||||
var log = document.getElementById('console');
|
||||
log.innerHTML += str + "\n";
|
||||
}
|
||||
|
||||
uploader.init();
|
||||
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@ -1,139 +0,0 @@
|
||||
<!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>
|
||||
@ -1,113 +0,0 @@
|
||||
<!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>
|
||||
@ -1,66 +0,0 @@
|
||||
<!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>
|
||||
@ -1,125 +0,0 @@
|
||||
<?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>
|
||||
@ -1,125 +0,0 @@
|
||||
<?php
|
||||
/**
|
||||
* upload.php
|
||||
*
|
||||
* Copyright 2013, Moxiecode Systems AB
|
||||
* Released under GPL License.
|
||||
*
|
||||
* License: http://www.plupload.com/license
|
||||
* Contributing: http://www.plupload.com/contributing
|
||||
*/
|
||||
|
||||
#!! IMPORTANT:
|
||||
#!! this file is just an example, it doesn't incorporate any security checks and
|
||||
#!! is not recommended to be used in production environment as it is. Be sure to
|
||||
#!! revise it and customize to your needs.
|
||||
|
||||
|
||||
// Make sure file is not cached (as it happens for example on iOS devices)
|
||||
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");
|
||||
header("Last-Modified: " . gmdate("D, d M Y H:i:s") . " GMT");
|
||||
header("Cache-Control: no-store, no-cache, must-revalidate");
|
||||
header("Cache-Control: post-check=0, pre-check=0", false);
|
||||
header("Pragma: no-cache");
|
||||
|
||||
/*
|
||||
// Support CORS
|
||||
header("Access-Control-Allow-Origin: *");
|
||||
// other CORS headers if any...
|
||||
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
|
||||
exit; // finish preflight CORS requests here
|
||||
}
|
||||
*/
|
||||
|
||||
// 5 minutes execution time
|
||||
@set_time_limit(5 * 60);
|
||||
|
||||
// Uncomment this one to fake upload time
|
||||
// usleep(5000);
|
||||
|
||||
// Settings
|
||||
$targetDir = ini_get("upload_tmp_dir") . DIRECTORY_SEPARATOR . "plupload";
|
||||
//$targetDir = 'uploads';
|
||||
$cleanupTargetDir = true; // Remove old files
|
||||
$maxFileAge = 5 * 3600; // Temp file age in seconds
|
||||
|
||||
|
||||
// Create target dir
|
||||
if (!file_exists($targetDir)) {
|
||||
@mkdir($targetDir);
|
||||
}
|
||||
|
||||
// Get a file name
|
||||
if (isset($_REQUEST["name"])) {
|
||||
$fileName = $_REQUEST["name"];
|
||||
} elseif (!empty($_FILES)) {
|
||||
$fileName = $_FILES["file"]["name"];
|
||||
} else {
|
||||
$fileName = uniqid("file_");
|
||||
}
|
||||
|
||||
$filePath = $targetDir . DIRECTORY_SEPARATOR . $fileName;
|
||||
|
||||
// Chunking might be enabled
|
||||
$chunk = isset($_REQUEST["chunk"]) ? intval($_REQUEST["chunk"]) : 0;
|
||||
$chunks = isset($_REQUEST["chunks"]) ? intval($_REQUEST["chunks"]) : 0;
|
||||
|
||||
|
||||
// Remove old temp files
|
||||
if ($cleanupTargetDir) {
|
||||
if (!is_dir($targetDir) || !$dir = opendir($targetDir)) {
|
||||
die('{"jsonrpc" : "2.0", "error" : {"code": 100, "message": "Failed to open temp directory."}, "id" : "id"}');
|
||||
}
|
||||
|
||||
while (($file = readdir($dir)) !== false) {
|
||||
$tmpfilePath = $targetDir . DIRECTORY_SEPARATOR . $file;
|
||||
|
||||
// If temp file is current file proceed to the next
|
||||
if ($tmpfilePath == "{$filePath}.part") {
|
||||
continue;
|
||||
}
|
||||
|
||||
// Remove temp file if it is older than the max age and is not the current file
|
||||
if (preg_match('/\.part$/', $file) && (filemtime($tmpfilePath) < time() - $maxFileAge)) {
|
||||
@unlink($tmpfilePath);
|
||||
}
|
||||
}
|
||||
closedir($dir);
|
||||
}
|
||||
|
||||
|
||||
// Open temp file
|
||||
if (!$out = @fopen("{$filePath}.part", $chunks ? "ab" : "wb")) {
|
||||
die('{"jsonrpc" : "2.0", "error" : {"code": 102, "message": "Failed to open output stream."}, "id" : "id"}');
|
||||
}
|
||||
|
||||
if (!empty($_FILES)) {
|
||||
if ($_FILES["file"]["error"] || !is_uploaded_file($_FILES["file"]["tmp_name"])) {
|
||||
die('{"jsonrpc" : "2.0", "error" : {"code": 103, "message": "Failed to move uploaded file."}, "id" : "id"}');
|
||||
}
|
||||
|
||||
// Read binary input stream and append it to temp file
|
||||
if (!$in = @fopen($_FILES["file"]["tmp_name"], "rb")) {
|
||||
die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
|
||||
}
|
||||
} else {
|
||||
if (!$in = @fopen("php://input", "rb")) {
|
||||
die('{"jsonrpc" : "2.0", "error" : {"code": 101, "message": "Failed to open input stream."}, "id" : "id"}');
|
||||
}
|
||||
}
|
||||
|
||||
while ($buff = fread($in, 4096)) {
|
||||
fwrite($out, $buff);
|
||||
}
|
||||
|
||||
@fclose($out);
|
||||
@fclose($in);
|
||||
|
||||
// Check if file has been uploaded
|
||||
if (!$chunks || $chunk == $chunks - 1) {
|
||||
// Strip the temp .part suffix off
|
||||
rename("{$filePath}.part", $filePath);
|
||||
}
|
||||
|
||||
// Return Success JSON-RPC response
|
||||
die('{"jsonrpc" : "2.0", "result" : null, "id" : "id"}');
|
||||
|
Before Width: | Height: | Size: 3.9 KiB |
|
Before Width: | Height: | Size: 6.4 KiB |
375
assets/stylesheets/plupload/jquery.ui.plupload.css
vendored
@ -1,375 +0,0 @@
|
||||
/*
|
||||
Plupload
|
||||
------------------------------------------------------------------- */
|
||||
|
||||
.plupload_wrapper * {
|
||||
box-sizing: content-box;
|
||||
}
|
||||
|
||||
.plupload_button {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.plupload_wrapper {
|
||||
font: normal 11px Verdana,sans-serif;
|
||||
width: 100%;
|
||||
min-width: 520px;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.plupload_container {
|
||||
_height: 300px;
|
||||
min-height: 300px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plupload_filelist_footer {border-width: 1px 0 0 0}
|
||||
.plupload_file {border-width: 0 0 1px 0}
|
||||
.plupload_container .plupload_header {border-width: 0 0 1px 0; position: relative;}
|
||||
|
||||
.plupload_delete .ui-icon,
|
||||
.plupload_done .ui-icon,
|
||||
.plupload_failed .ui-icon {
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.plupload_header_content {
|
||||
height: 56px;
|
||||
padding: 0 160px 0 60px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.plupload_logo {
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
background: url('../images/plupload.png') no-repeat 0 0;
|
||||
position: absolute;
|
||||
top: 8px;
|
||||
left: 8px;
|
||||
}
|
||||
|
||||
.plupload_header_content_bw .plupload_logo {
|
||||
background-position: -40px 0;
|
||||
}
|
||||
|
||||
.plupload_header_title {
|
||||
font: normal 18px sans-serif;
|
||||
line-height: 19px;
|
||||
padding: 6px 0 3px;
|
||||
}
|
||||
|
||||
.plupload_header_text {
|
||||
font: normal 12px sans-serif;
|
||||
}
|
||||
|
||||
.plupload_view_switch {
|
||||
position: absolute;
|
||||
right: 16px;
|
||||
bottom: 8px;
|
||||
margin: 0;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plupload_view_switch .ui-button {
|
||||
margin-right: -0.31em;
|
||||
}
|
||||
|
||||
.plupload_content {
|
||||
position: absolute;
|
||||
top: 86px;
|
||||
bottom: 44px;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow-y: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plupload_filelist {
|
||||
border-collapse: collapse;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
width: 100%;
|
||||
-moz-user-select: none;
|
||||
-webkit-user-select: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.plupload_filelist_content {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.plupload_cell {padding: 8px 6px;}
|
||||
|
||||
.plupload_file {
|
||||
list-style: none;
|
||||
display: block;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
line-height: 12px;
|
||||
}
|
||||
|
||||
.plupload_file_thumb {
|
||||
position: relative;
|
||||
background-image: none;
|
||||
background-color: #eee;
|
||||
}
|
||||
|
||||
.plupload_thumb_loading {
|
||||
background: #eee url(../images/loading.gif) center no-repeat;
|
||||
}
|
||||
|
||||
.plupload_thumb_loading .plupload_file_dummy,
|
||||
.plupload_thumb_embedded .plupload_file_dummy {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plupload_file_name {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.plupload_filelist_header {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.plupload_filelist_footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.plupload_buttons {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* list view */
|
||||
.plupload_view_list .plupload_file {
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
border-top: none;
|
||||
height: 29px;
|
||||
width: 100% !important;
|
||||
/* fix IE6 vertical white-space bug */
|
||||
_float: left;
|
||||
_clear: left;
|
||||
}
|
||||
|
||||
.plupload_view_list div.plupload_file_size,
|
||||
.plupload_view_list div.plupload_file_status,
|
||||
.plupload_view_list div.plupload_file_action {
|
||||
padding: 8px 6px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.plupload_view_list div.plupload_file_name {
|
||||
margin-right: 156px;
|
||||
padding: 8px 6px;
|
||||
_width: 75%;
|
||||
}
|
||||
|
||||
.plupload_view_list div.plupload_file_size {
|
||||
right: 28px;
|
||||
}
|
||||
|
||||
.plupload_view_list div.plupload_file_status {
|
||||
right: 82px;
|
||||
}
|
||||
|
||||
.plupload_view_list .plupload_file_rename {
|
||||
margin-left: -2px;
|
||||
}
|
||||
|
||||
.plupload_view_list .plupload_file_size,
|
||||
.plupload_view_list .plupload_file_status,
|
||||
.plupload_filelist_footer .plupload_file_size,
|
||||
.plupload_filelist_footer .plupload_file_status {
|
||||
text-align: right;
|
||||
width: 52px;
|
||||
}
|
||||
|
||||
.plupload_view_list .plupload_file_thumb {
|
||||
position: absolute;
|
||||
top: -999px;
|
||||
}
|
||||
|
||||
.plupload_view_list .plupload_file_progress {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
/* thumbs view */
|
||||
.plupload_view_thumbs .plupload_content {
|
||||
top: 57px;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs .plupload_filelist_header {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs .plupload_file {
|
||||
padding: 6px;
|
||||
margin: 10px;
|
||||
border: 1px solid #fff;
|
||||
float: left;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs .plupload_file_thumb,
|
||||
.plupload_view_thumbs .plupload_file_dummy {
|
||||
text-align: center;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs .plupload_file_dummy {
|
||||
font-size: 21px;
|
||||
font-weight: bold;
|
||||
text-transform: lowercase;
|
||||
overflow: hidden;
|
||||
border: none;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs div.plupload_file_action {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs div.plupload_file_name {
|
||||
padding: 0;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs .plupload_file_rename {
|
||||
padding: 1px 0;
|
||||
width: 100% !important;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs div.plupload_file_size {
|
||||
font-size: 0.8em;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs div.plupload_file_status {
|
||||
position: relative;
|
||||
height: 3px;
|
||||
overflow: hidden;
|
||||
text-indent: -999px;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.plupload_view_thumbs div.plupload_file_progress {
|
||||
border: none;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.plupload .ui-sortable-helper,
|
||||
.plupload .ui-sortable .plupload_file {
|
||||
cursor:move;
|
||||
}
|
||||
|
||||
.plupload_file_action {width: 16px;}
|
||||
.plupload_file_name {
|
||||
overflow: hidden;
|
||||
padding-left: 10px;
|
||||
}
|
||||
|
||||
.plupload_file_rename {
|
||||
border: none;
|
||||
font: normal 11px Verdana, sans-serif;
|
||||
padding: 1px 2px;
|
||||
line-height: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
|
||||
.plupload_progress {width: 60px;}
|
||||
.plupload_progress_container {padding: 1px;}
|
||||
|
||||
|
||||
/* Floats */
|
||||
|
||||
.plupload_right {float: right;}
|
||||
.plupload_left {float: left;}
|
||||
.plupload_clear,.plupload_clearer {clear: both;}
|
||||
.plupload_clearer, .plupload_progress_bar {
|
||||
display: block;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
}
|
||||
.plupload_clearer {height: 0;}
|
||||
|
||||
/* Misc */
|
||||
.plupload_hidden {display: none !important;}
|
||||
|
||||
.plupload_droptext {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: transparent;
|
||||
text-align: center;
|
||||
vertical-align: middle;
|
||||
border: 0;
|
||||
line-height: 160px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.plupload_dropbox .plupload_droptext {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.plupload_buttons, .plupload_upload_status {float: left}
|
||||
|
||||
.plupload_message {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.plupload_message p {
|
||||
padding:0.7em;
|
||||
margin:0;
|
||||
}
|
||||
|
||||
.plupload_message strong {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.plupload_message i {
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.plupload_message p span.ui-icon {
|
||||
float: left;
|
||||
margin-right: 0.3em;
|
||||
}
|
||||
|
||||
.plupload_header_content .ui-state-error,
|
||||
.plupload_header_content .ui-state-highlight {
|
||||
border:none;
|
||||
}
|
||||
|
||||
.plupload_message_close {
|
||||
position:absolute;
|
||||
top:5px;
|
||||
right:5px;
|
||||
cursor:pointer;
|
||||
}
|
||||
|
||||
.plupload .ui-sortable-placeholder {
|
||||
height:35px;
|
||||
}
|
||||