From 70bcfb5b861894ecfc5df386921586e3b2ff2555 Mon Sep 17 00:00:00 2001 From: plegall Date: Tue, 27 May 2014 14:11:23 +0000 Subject: [PATCH] feature 2616: HTML5 upload (with plupload 2.1.2). First basic implementation. Needs customization. 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 --- .../default/template/photos_add_direct.tpl | 243 +- admin/themes/default/theme.css | 7 +- include/ws_functions/pwg.images.php | 140 + themes/default/js/plugins/plupload/Moxie.swf | Bin 0 -> 29349 bytes themes/default/js/plugins/plupload/Moxie.xap | Bin 0 -> 62643 bytes themes/default/js/plugins/plupload/i18n/ar.js | 2 + themes/default/js/plugins/plupload/i18n/az.js | 2 + themes/default/js/plugins/plupload/i18n/bs.js | 2 + themes/default/js/plugins/plupload/i18n/cs.js | 2 + themes/default/js/plugins/plupload/i18n/cy.js | 2 + themes/default/js/plugins/plupload/i18n/da.js | 2 + themes/default/js/plugins/plupload/i18n/de.js | 2 + themes/default/js/plugins/plupload/i18n/el.js | 2 + themes/default/js/plugins/plupload/i18n/en.js | 2 + themes/default/js/plugins/plupload/i18n/es.js | 2 + themes/default/js/plugins/plupload/i18n/et.js | 2 + themes/default/js/plugins/plupload/i18n/fa.js | 2 + themes/default/js/plugins/plupload/i18n/fi.js | 2 + themes/default/js/plugins/plupload/i18n/fr.js | 2 + themes/default/js/plugins/plupload/i18n/he.js | 2 + themes/default/js/plugins/plupload/i18n/hr.js | 2 + themes/default/js/plugins/plupload/i18n/hu.js | 2 + themes/default/js/plugins/plupload/i18n/hy.js | 2 + themes/default/js/plugins/plupload/i18n/id.js | 2 + themes/default/js/plugins/plupload/i18n/it.js | 2 + themes/default/js/plugins/plupload/i18n/ja.js | 2 + themes/default/js/plugins/plupload/i18n/ka.js | 2 + themes/default/js/plugins/plupload/i18n/kk.js | 2 + themes/default/js/plugins/plupload/i18n/km.js | 2 + themes/default/js/plugins/plupload/i18n/ko.js | 2 + themes/default/js/plugins/plupload/i18n/lt.js | 2 + themes/default/js/plugins/plupload/i18n/lv.js | 2 + themes/default/js/plugins/plupload/i18n/mn.js | 2 + themes/default/js/plugins/plupload/i18n/ms.js | 2 + themes/default/js/plugins/plupload/i18n/nl.js | 2 + themes/default/js/plugins/plupload/i18n/pl.js | 2 + .../default/js/plugins/plupload/i18n/pt_BR.js | 2 + themes/default/js/plugins/plupload/i18n/ro.js | 2 + themes/default/js/plugins/plupload/i18n/ru.js | 2 + themes/default/js/plugins/plupload/i18n/sk.js | 2 + themes/default/js/plugins/plupload/i18n/sq.js | 2 + themes/default/js/plugins/plupload/i18n/sr.js | 2 + .../default/js/plugins/plupload/i18n/sr_RS.js | 2 + themes/default/js/plugins/plupload/i18n/sv.js | 2 + .../default/js/plugins/plupload/i18n/th_TH.js | 2 + themes/default/js/plugins/plupload/i18n/tr.js | 2 + .../default/js/plugins/plupload/i18n/uk_UA.js | 2 + .../default/js/plugins/plupload/i18n/zh_CN.js | 2 + .../default/js/plugins/plupload/i18n/zh_TW.js | 2 + .../css/jquery.plupload.queue.css | 185 + .../jquery.plupload.queue/img/backgrounds.gif | Bin 0 -> 2977 bytes .../img/buttons-disabled.png | Bin 0 -> 1292 bytes .../jquery.plupload.queue/img/buttons.png | Bin 0 -> 1439 bytes .../jquery.plupload.queue/img/delete.gif | Bin 0 -> 180 bytes .../jquery.plupload.queue/img/done.gif | Bin 0 -> 1024 bytes .../jquery.plupload.queue/img/error.gif | Bin 0 -> 994 bytes .../jquery.plupload.queue/img/throbber.gif | Bin 0 -> 1922 bytes .../jquery.plupload.queue/img/transp50.png | Bin 0 -> 399 bytes .../jquery.plupload.queue.js | 428 + .../jquery.plupload.queue.min.js | 1 + .../css/jquery.ui.plupload.css | 371 + .../css/jquery.ui.plupload.css.orig | 370 + .../jquery.ui.plupload/img/loading.gif | Bin 0 -> 4023 bytes .../jquery.ui.plupload/img/plupload.png | Bin 0 -> 6597 bytes .../jquery.ui.plupload/jquery.ui.plupload.js | 1323 ++ .../jquery.ui.plupload.min.js | 1 + themes/default/js/plugins/plupload/moxie.js | 10726 ++++++++++++++++ .../default/js/plugins/plupload/moxie.min.js | 15 + .../js/plugins/plupload/plupload.dev.js | 2315 ++++ .../js/plugins/plupload/plupload.full.min.js | 28 + .../js/plugins/plupload/plupload.min.js | 13 + ws.php | 24 + 72 files changed, 16110 insertions(+), 168 deletions(-) create mode 100644 themes/default/js/plugins/plupload/Moxie.swf create mode 100644 themes/default/js/plugins/plupload/Moxie.xap create mode 100644 themes/default/js/plugins/plupload/i18n/ar.js create mode 100644 themes/default/js/plugins/plupload/i18n/az.js create mode 100644 themes/default/js/plugins/plupload/i18n/bs.js create mode 100644 themes/default/js/plugins/plupload/i18n/cs.js create mode 100644 themes/default/js/plugins/plupload/i18n/cy.js create mode 100644 themes/default/js/plugins/plupload/i18n/da.js create mode 100644 themes/default/js/plugins/plupload/i18n/de.js create mode 100644 themes/default/js/plugins/plupload/i18n/el.js create mode 100644 themes/default/js/plugins/plupload/i18n/en.js create mode 100644 themes/default/js/plugins/plupload/i18n/es.js create mode 100644 themes/default/js/plugins/plupload/i18n/et.js create mode 100644 themes/default/js/plugins/plupload/i18n/fa.js create mode 100644 themes/default/js/plugins/plupload/i18n/fi.js create mode 100644 themes/default/js/plugins/plupload/i18n/fr.js create mode 100644 themes/default/js/plugins/plupload/i18n/he.js create mode 100644 themes/default/js/plugins/plupload/i18n/hr.js create mode 100644 themes/default/js/plugins/plupload/i18n/hu.js create mode 100644 themes/default/js/plugins/plupload/i18n/hy.js create mode 100644 themes/default/js/plugins/plupload/i18n/id.js create mode 100644 themes/default/js/plugins/plupload/i18n/it.js create mode 100644 themes/default/js/plugins/plupload/i18n/ja.js create mode 100644 themes/default/js/plugins/plupload/i18n/ka.js create mode 100644 themes/default/js/plugins/plupload/i18n/kk.js create mode 100644 themes/default/js/plugins/plupload/i18n/km.js create mode 100644 themes/default/js/plugins/plupload/i18n/ko.js create mode 100644 themes/default/js/plugins/plupload/i18n/lt.js create mode 100644 themes/default/js/plugins/plupload/i18n/lv.js create mode 100644 themes/default/js/plugins/plupload/i18n/mn.js create mode 100644 themes/default/js/plugins/plupload/i18n/ms.js create mode 100644 themes/default/js/plugins/plupload/i18n/nl.js create mode 100644 themes/default/js/plugins/plupload/i18n/pl.js create mode 100644 themes/default/js/plugins/plupload/i18n/pt_BR.js create mode 100644 themes/default/js/plugins/plupload/i18n/ro.js create mode 100644 themes/default/js/plugins/plupload/i18n/ru.js create mode 100644 themes/default/js/plugins/plupload/i18n/sk.js create mode 100644 themes/default/js/plugins/plupload/i18n/sq.js create mode 100644 themes/default/js/plugins/plupload/i18n/sr.js create mode 100644 themes/default/js/plugins/plupload/i18n/sr_RS.js create mode 100644 themes/default/js/plugins/plupload/i18n/sv.js create mode 100644 themes/default/js/plugins/plupload/i18n/th_TH.js create mode 100644 themes/default/js/plugins/plupload/i18n/tr.js create mode 100644 themes/default/js/plugins/plupload/i18n/uk_UA.js create mode 100644 themes/default/js/plugins/plupload/i18n/zh_CN.js create mode 100644 themes/default/js/plugins/plupload/i18n/zh_TW.js create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/css/jquery.plupload.queue.css create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/img/backgrounds.gif create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/img/buttons-disabled.png create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/img/buttons.png create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/img/delete.gif create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/img/done.gif create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/img/error.gif create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/img/throbber.gif create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/img/transp50.png create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.js create mode 100644 themes/default/js/plugins/plupload/jquery.plupload.queue/jquery.plupload.queue.min.js create mode 100644 themes/default/js/plugins/plupload/jquery.ui.plupload/css/jquery.ui.plupload.css create mode 100644 themes/default/js/plugins/plupload/jquery.ui.plupload/css/jquery.ui.plupload.css.orig create mode 100644 themes/default/js/plugins/plupload/jquery.ui.plupload/img/loading.gif create mode 100644 themes/default/js/plugins/plupload/jquery.ui.plupload/img/plupload.png create mode 100644 themes/default/js/plugins/plupload/jquery.ui.plupload/jquery.ui.plupload.js create mode 100644 themes/default/js/plugins/plupload/jquery.ui.plupload/jquery.ui.plupload.min.js create mode 100644 themes/default/js/plugins/plupload/moxie.js create mode 100644 themes/default/js/plugins/plupload/moxie.min.js create mode 100644 themes/default/js/plugins/plupload/plupload.dev.js create mode 100644 themes/default/js/plugins/plupload/plupload.full.min.js create mode 100644 themes/default/js/plugins/plupload/plupload.min.js diff --git a/admin/themes/default/template/photos_add_direct.tpl b/admin/themes/default/template/photos_add_direct.tpl index df87e4d87..b5b471fb9 100644 --- a/admin/themes/default/template/photos_add_direct.tpl +++ b/admin/themes/default/template/photos_add_direct.tpl @@ -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 = '

'; - 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 = ''; + html += ''; + html += ' '; + + 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(''); - - jQuery.jGrowl( - '

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(' '); - }, - 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 */ {'create a new album'|@translate} +

{'Manage Permissions'|@translate}

+ + +
{'Select files'|@translate} @@ -329,45 +281,12 @@ var sizeLimit = Math.round({$upload_max_filesize} / 1024); /* in KBytes */

+
+

Your browser doesn't have Flash, Silverlight or HTML5 support.

+
-{if $upload_mode eq 'html'} -
- - -

{'You are using the Browser uploader. Try the Flash uploader instead.'|@translate:$switch_url}

- -{elseif $upload_mode eq 'multiple'} -
You've got a problem with your JavaScript
- - - -

{'You are using the Flash uploader. Problems? Try the Browser uploader instead.'|@translate:$switch_url}

- -{/if}
-

{'Manage Permissions'|@translate}

- - - -{if $upload_mode eq 'html'} -

- -

-{elseif $upload_mode eq 'multiple'} -

- - -

-{/if}