Anthony Callegaro
e3bb5b91e1
What works : * the plugin in general and its structure that was inspire by the default uploadify module and by the html_uploader * it does replace the default uploader upon install * re-use the same form to upload files * Use HTML5 and Flash (for now can add other backend if useful) * Reduce image to a selected size * The file selection button is mapped to the module * Once selected uploading start automatically as well as the image size reduction * Display selected files and upload status (text only for now) * Change the status of the button at the bottom of the form depending on the upload status What doesn't work yet: * actually adding the photo to the album (made some network capture with uploadify POST to try to reproduce it) * "Cancel All" button isn't currently stopping the upload * Dynamically display the upload process like the uploadify module
168 lines
6.1 KiB
PHP
168 lines
6.1 KiB
PHP
<?php defined("SYSPATH") or die("No direct script access.") ?>
|
|
<script type="text/javascript" src="<?= url::file("modules/plupload/lib/plupload.js") ?>"></script>
|
|
<script type="text/javascript" src="<?= url::file("modules/plupload/lib/plupload.flash.js") ?>"></script>
|
|
<script type="text/javascript" src="<?= url::file("modules/plupload/lib/plupload.html5.js") ?>"></script>
|
|
<script type="text/javascript" src="<?= url::file("modules/plupload/lib/jquery.ui.plupload/jquery.ui.plupload.js") ?>"></script>
|
|
<script type="text/javascript">
|
|
// Convert divs to queue widgets when the DOM is ready
|
|
$("#g-add-photos-canvas").ready($(function() {
|
|
debugger;
|
|
|
|
//$("#g-plupload").plupload({
|
|
var uploader = new plupload.Uploader({
|
|
// General settings
|
|
runtimes : 'html5,flash',
|
|
url : "<?= url::site("uploader/add_photo/{$album->id}") ?>",
|
|
max_file_size : <?= $size_limit_bytes ?>,
|
|
max_file_count: <?= $simultaneous_upload_limit ?>, // user can add no more then 20 files at a time
|
|
chunk_size : '1mb',
|
|
unique_names : true,
|
|
multiple_queues : true,
|
|
browse_button : 'g-add-photos-button',
|
|
container : "g-add-photos-canvas",
|
|
|
|
// Resize images on clientside if we can
|
|
resize : {width : 320, height : 240, quality : 90},
|
|
|
|
// Rename files by clicking on their titles
|
|
rename: true,
|
|
|
|
// Sort files
|
|
sortable: true,
|
|
|
|
// Specify what files to browse for
|
|
filters : [
|
|
{title : "Image files", extensions : "jpg,gif,png"},
|
|
],
|
|
|
|
// Flash settings
|
|
flash_swf_url : '../../js/plupload.flash.swf',
|
|
onClearQueue: function(event) {
|
|
$("#g-upload-cancel-all")
|
|
.addClass("ui-state-disabled")
|
|
.attr("disabled", "disabled");
|
|
$("#g-upload-done")
|
|
.removeClass("ui-state-disabled")
|
|
.attr("disabled", null);
|
|
return true;
|
|
},
|
|
onComplete: function(event, queueID, fileObj, response, data) {
|
|
var re = /^error: (.*)$/i;
|
|
var msg = re.exec(response);
|
|
$("#g-add-photos-status ul").append(
|
|
"<li id=\"q" + queueID + "\" class=\"g-success\"><span></span> - " +
|
|
<?= t("Completed")->for_js() ?> + "</li>");
|
|
$("#g-add-photos-status li#q" + queueID + " span").text(fileObj.name);
|
|
setTimeout(function() { $("#q" + queueID).slideUp("slow").remove() }, 5000);
|
|
success_count++;
|
|
update_status();
|
|
return true;
|
|
},
|
|
onError: function(event, queueID, fileObj, errorObj) {
|
|
if (errorObj.type == "HTTP") {
|
|
if (errorObj.info == "500") {
|
|
error_msg = <?= t("Unable to process this photo")->for_js() ?>;
|
|
} else if (errorObj.info == "404") {
|
|
error_msg = <?= t("The upload script was not found")->for_js() ?>;
|
|
} else if (errorObj.info == "400") {
|
|
error_msg = <?= t("This photo is too large (max is %size bytes)",
|
|
array("size" => $size_limit))->for_js() ?>;
|
|
} else {
|
|
msg += (<?= t("Server error: __INFO__ (__TYPE__)")->for_js() ?>
|
|
.replace("__INFO__", errorObj.info)
|
|
.replace("__TYPE__", errorObj.type));
|
|
}
|
|
} else if (errorObj.type == "File Size") {
|
|
error_msg = <?= t("This photo is too large (max is %size bytes)",
|
|
array("size" => $size_limit))->for_js() ?>;
|
|
} else {
|
|
error_msg = <?= t("Server error: __INFO__ (__TYPE__)")->for_js() ?>
|
|
.replace("__INFO__", errorObj.info)
|
|
.replace("__TYPE__", errorObj.type);
|
|
}
|
|
msg = " - <a target=\"_blank\" href=\"http://codex.gallery2.org/Gallery3:Troubleshooting:Uploading\">" +
|
|
error_msg + "</a>";
|
|
|
|
$("#g-add-photos-status ul").append(
|
|
"<li id=\"q" + queueID + "\" class=\"g-error\"><span></span>" + msg + "</li>");
|
|
$("#g-add-photos-status li#q" + queueID + " span").text(fileObj.name);
|
|
$("#g-uploadify").uploadifyCancel(queueID);
|
|
error_count++;
|
|
update_status();
|
|
},
|
|
onSelect: function(event) {
|
|
}
|
|
});
|
|
uploader.bind('Init', function(up, params) {
|
|
$('#filelist').html("<div><b>Debug :</b>Current runtime: " + params.runtime + "</div>");
|
|
});
|
|
|
|
uploader.init();
|
|
|
|
uploader.bind('FilesAdded', function(up, files) {
|
|
$.each(files, function(i, file) {
|
|
$('#filelist').append(
|
|
'<div id="' + file.id + '">' +
|
|
file.name + ' (' + plupload.formatSize(file.size) + ') <b></b>' +
|
|
'</div>');
|
|
});
|
|
uploader.start();
|
|
if ($("#g-upload-cancel-all").hasClass("ui-state-disabled")) {
|
|
$("#g-upload-cancel-all")
|
|
.removeClass("ui-state-disabled")
|
|
.attr("disabled", null);
|
|
$("#g-upload-done")
|
|
.addClass("ui-state-disabled")
|
|
.attr("disabled", "disabled");
|
|
}
|
|
e.preventDefault();
|
|
up.refresh(); // Reposition Flash/Silverlight
|
|
});
|
|
|
|
uploader.bind('UploadProgress', function(up, file) {
|
|
$('#' + file.id + " b").html(file.percent + "%");
|
|
});
|
|
|
|
uploader.bind('Error', function(up, err) {
|
|
$('#filelist').append("<div>Error: " + err.code +
|
|
", Message: " + err.message +
|
|
(err.file ? ", File: " + err.file.name : "") +
|
|
"</div>"
|
|
);
|
|
|
|
up.refresh(); // Reposition Flash/Silverlight
|
|
});
|
|
|
|
uploader.bind('FileUploaded', function(up, file) {
|
|
$('#' + file.id + " b").html("100%");
|
|
$("#g-upload-cancel-all")
|
|
.addClass("ui-state-disabled")
|
|
.attr("disabled", "disabled");
|
|
$("#g-upload-done")
|
|
.removeClass("ui-state-disabled")
|
|
.attr("disabled", null);
|
|
});
|
|
|
|
})
|
|
);
|
|
</script>
|
|
|
|
<div>
|
|
<ul class="g-breadcrumbs">
|
|
<? foreach ($album->parents() as $i => $parent): ?>
|
|
<li<? if ($i == 0) print " class=\"g-first\"" ?>> <?= html::clean($parent->title) ?> </li>
|
|
<? endforeach ?>
|
|
<li class="g-active"> <?= html::purify($album->title) ?> </li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div id="g-add-photos-canvas">
|
|
<button id="g-add-photos-button" class="g-button ui-state-default ui-corner-all" href="#"><?= t("Select photos (%size max per file)...", array("size" => $size_limit)) ?></button>
|
|
<div id="filelist">No runtime found.</div>
|
|
<span id="g-plupload"></span>
|
|
</div>
|
|
<div id="g-add-photos-status">
|
|
<ul id="g-action-status" class="g-message-block">
|
|
</ul>
|
|
</div>
|
|
</div>
|