adam/Piwigo
1
0
Fork 0
mirror of https://github.com/Piwigo/Piwigo.git synced 2026-08-07 17:23:04 +02:00
Code Issues Packages Projects Releases Wiki Activity

feature 2616: HTML5 upload (with plupload 2.1.2). First basic implementation. Needs customization.

Browse Source 
Chunked upload + Drag & drop (no more Flash)

use a new specific API method pwg.images.upload


git-svn-id: http://piwigo.org/svn/trunk@28545 68402e56-0260-453c-a942-63ccdbb3a9ee
This commit is contained in:
plegall
2014-05-27 14:11:23 +00:00
parent 39fc0a9f9a
commit 70bcfb5b86
72 changed files with 16110 additions and 168 deletions
Download Patch File Download Diff File Expand all files Collapse all files
admin/themes/default/template/photos_add_direct.tpl
+81 -162
View File
@@ -1,10 +1,10 @@
{if $upload_mode eq 'multiple'}
{combine_script id='jquery.jgrowl' load='footer' require='jquery' path='themes/default/js/plugins/jquery.jgrowl_minimized.js' }
{combine_script id='jquery.uploadify' load='footer' require='jquery' path='admin/include/uploadify/jquery.uploadify.v3.0.0.min.js' }
{combine_script id='jquery.jgrowl' load='footer' require='jquery' path='themes/default/js/plugins/jquery.jgrowl_minimized.js'}
{combine_script id='jquery.plupload' load='footer' require='jquery' path='themes/default/js/plugins/plupload/plupload.full.min.js'}
{combine_script id='jquery.plupload.queue' load='footer' require='jquery' path='themes/default/js/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js'}
{combine_script id='jquery.ui.progressbar' load='footer'}
{combine_css path="themes/default/js/plugins/jquery.jgrowl.css"}
{combine_css path="admin/include/uploadify/uploadify.css"}
{/if}
{combine_css path="themes/default/js/plugins/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css"}
{include file='include/colorbox.inc.tpl'}
{include file='include/add_album.inc.tpl'}
@@ -35,6 +35,12 @@ categoriesCache.selectize(jQuery('[data-selectize=categories]'), {
jQuery('[data-add-album]').pwgAddAlbum({ cache: categoriesCache });
var uploadify_path = '{$uploadify_path}';
var upload_id = '{$upload_id}';
var session_id = '{$session_id}';
var pwg_token = '{$pwg_token}';
var buttonText = "{'Select files'|@translate}";
var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
{literal}
jQuery(document).ready(function(){
@@ -112,137 +118,73 @@ jQuery(document).ready(function(){
return false;
});
{/literal}
{if $upload_mode eq 'html'}
{literal}
function addUploadBox() {
var uploadBox = '<p class="file"><input type="file" size="60" name="image_upload[]"></p>';
jQuery(uploadBox).appendTo("#uploadBoxes");
}
jQuery("#uploader").pluploadQueue({
// General settings
// runtimes : 'html5,flash,silverlight,html4',
runtimes : 'html5',
addUploadBox();
// url : '../upload.php',
url : 'ws.php?method=pwg.images.upload&format=json',
jQuery("#addUploadBox A").click(function () {
addUploadBox();
});
// User can upload no more then 20 files in one go (sets multiple_queues to false)
max_file_count: 100,
chunk_size: '500kb',
filters : {
// Maximum file size
max_file_size : '1000mb',
// Specify what files to browse for
mime_types: [
{title : "Image files", extensions : "jpeg,jpg,gif,png"},
{title : "Zip files", extensions : "zip"}
]
},
jQuery("#uploadForm").submit(function() {
return checkUploadStart();
});
{/literal}
{elseif $upload_mode eq 'multiple'}
// Rename files by clicking on their titles
// rename: true,
// Sort files
sortable: true,
var uploadify_path = '{$uploadify_path}';
var upload_id = '{$upload_id}';
var session_id = '{$session_id}';
var pwg_token = '{$pwg_token}';
var buttonText = "{'Select files'|@translate}";
var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
// Enable ability to drag'n'drop files onto the widget (currently only HTML5 supports that)
dragdrop: true,
{literal}
jQuery("#uploadify").uploadify({
'uploader' : uploadify_path + '/uploadify.php',
'langFile' : uploadify_path + '/uploadifyLang_en.js',
'swf' : uploadify_path + '/uploadify.swf',
'checkExisting' : false,
init : {
BeforeUpload: function(up, file) {
console.log('[BeforeUpload]', file);
buttonCursor : 'pointer',
'buttonText' : buttonText,
'width' : 300,
'cancelImage' : uploadify_path + '/cancel.png',
'queueID' : 'fileQueue',
'auto' : false,
'multi' : true,
'fileTypeDesc' : 'Photo files',
'fileTypeExts' : '*.jpg;*.JPG;*.jpeg;*.JPEG;*.png;*.PNG;*.gif;*.GIF;{/literal}{if $tif_enabled}*.tif;*.TIF;*.tiff;*.TIFF{/if}{literal}',
'fileSizeLimit' : sizeLimit,
'progressData' : 'percentage',
requeueErrors : false,
'onSelect' : function(event,ID,fileObj) {
jQuery("#fileQueue").show();
},
'onQueueComplete' : function(stats) {
jQuery("input[name=submit_upload]").click();
},
onUploadError: function (file,errorCode,errorMsg,errorString,swfuploadifyQueue) {
/* uploadify calls the onUploadError trigger when the user cancels a file! */
/* There no error so we skip it to avoid panic. */
if ("Cancelled" == errorString) {
return false;
// You can override settings before the file is uploaded
// up.setOption('url', 'upload.php?id=' + file.id);
up.setOption(
'multipart_params',
{
category : jQuery("select[name=category] option:selected").val(),
level : jQuery("select[name=level] option:selected").val(),
pwg_token : pwg_token
// name : file.name
}
);
},
FileUploaded: function(up, file, info) {
// Called when file has finished uploading
console.log('[FileUploaded] File:', file, "Info:", info);
var data = jQuery.parseJSON(info.response);
jQuery("#uploadedPhotos").parent("fieldset").show();
html = '<a href="admin.php?page=photo-'+data.result.image_id+'" target="_blank">';
html += '<img src="'+data.result.src+'" class="thumbnail">';
html += '</a> ';
jQuery("#uploadedPhotos").prepend(html);
}
var msg = file.name+', '+errorString;
/* Let's put the error message in the form to display once the form is */
/* performed, it makes support easier when user can copy/paste the error */
/* thrown. */
jQuery("#uploadForm").append('<input type="hidden" name="onUploadError[]" value="'+msg+'">');
jQuery.jGrowl(
'<p></p>onUploadError '+msg,
{
theme: 'error',
header: 'ERROR',
life: 4000,
sticky: false
}
);
return false;
},
onUploadSuccess: function (file,data,response) {
var data = jQuery.parseJSON(data);
jQuery("#uploadedPhotos").parent("fieldset").show();
/* Let's display the thumbnail of the uploaded photo, no need to wait the */
/* end of the queue */
jQuery("#uploadedPhotos").prepend('<img src="'+data.thumbnail_url+'" class="thumbnail"> ');
},
onUploadComplete: function(file,swfuploadifyQueue) {
var max = parseInt(jQuery("#progressMax").text());
var next = parseInt(jQuery("#progressCurrent").text())+1;
var addToProgressBar = 2;
if (next <= max) {
jQuery("#progressCurrent").text(next);
}
else {
addToProgressBar = 1;
}
jQuery("#progressbar").progressbar({
value: jQuery("#progressbar").progressbar("option", "value") + addToProgressBar
});
}
});
jQuery("input[type=button]").click(function() {
if (!checkUploadStart()) {
return false;
}
jQuery("#uploadify").uploadifySettings(
'postData',
{
'category_id' : jQuery("select[name=category]").val(),
'level' : jQuery("select[name=level] option:selected").val(),
'upload_id' : upload_id,
'session_id' : session_id,
'pwg_token' : pwg_token
}
);
nb_files = jQuery(".uploadifyQueueItem").size();
jQuery("#progressMax").text(nb_files);
jQuery("#progressbar").progressbar({max: nb_files*2, value:1});
jQuery("#progressCurrent").text(1);
jQuery("#uploadProgress").show();
jQuery("#uploadify").uploadifyUpload();
});
});
{/literal}
{/if}
});
{/footer_script}
@@ -313,6 +255,16 @@ var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
<a href="#" data-add-album="category" title="{'create a new album'|@translate}">{'create a new album'|@translate}</a>
</fieldset>
<p class="showFieldset"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
<fieldset id="permissions" style="display:none">
<legend>{'Who can see these photos?'|@translate}</legend>
<select name="level" size="1">
{html_options options=$level_options selected=$level_options_selected}
</select>
</fieldset>
<fieldset>
<legend>{'Select files'|@translate}</legend>
@@ -329,45 +281,12 @@ var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */
</p>
<div id="uploader">
<p>Your browser doesn't have Flash, Silverlight or HTML5 support.</p>
</div>
{if $upload_mode eq 'html'}
<div id="uploadBoxes"></div>
<div id="addUploadBox">
<a href="javascript:">{'+ Add an upload box'|@translate}</a>
</div>
<p id="uploadModeInfos">{'You are using the Browser uploader. Try the <a href="%s">Flash uploader</a> instead.'|@translate:$switch_url}</p>
{elseif $upload_mode eq 'multiple'}
<div id="uploadify">You've got a problem with your JavaScript</div>
<div id="fileQueue" style="display:none"></div>
<p id="uploadModeInfos">{'You are using the Flash uploader. Problems? Try the <a href="%s">Browser uploader</a> instead.'|@translate:$switch_url}</p>
{/if}
</fieldset>
<p class="showFieldset"><a id="showPermissions" href="#">{'Manage Permissions'|@translate}</a></p>
<fieldset id="permissions" style="display:none">
<legend>{'Who can see these photos?'|@translate}</legend>
<select name="level" size="1">
{html_options options=$level_options selected=$level_options_selected}
</select>
</fieldset>
{if $upload_mode eq 'html'}
<p>
<input class="submit" type="submit" name="submit_upload" value="{'Start Upload'|@translate}">
</p>
{elseif $upload_mode eq 'multiple'}
<p style="margin-bottom:1em">
<input class="submit" type="button" value="{'Start Upload'|@translate}">
<input type="submit" name="submit_upload" style="display:none">
</p>
{/if}
</form>
<div id="uploadProgress" style="display:none">
admin/themes/default/theme.css
+1 -6
View File
@@ -574,11 +574,6 @@ img.ui-datepicker-trigger {
text-align:left;
}
#photosAddContent FIELDSET {
width:650px;
margin:0 auto 20px auto;
}
#photosAddContent P {
margin:0;
}
@@ -998,7 +993,7 @@ p#uploadWarningsSummary .showInfo {margin-left:3px;}
p#uploadWarnings {display:none;text-align:left;margin-bottom:1em;font-size:90%;color:#999;}
p#uploadModeInfos {text-align:left;margin-top:1em;font-size:90%;color:#999;}
#photosAddContent p.showFieldset {text-align:left;margin: 0 auto 10px auto;width: 650px;}
#photosAddContent p.showFieldset {text-align:left;margin: 1em;}
#uploadProgress {width:650px; margin:10px auto;font-size:90%;}
#progressbar {border:1px solid #ccc; background-color:#eee;}