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

2 files changed, 88 insertions, 174 deletions

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 = '<p class="file"><input type="file" size="60" name="image_upload[]"></p>';
-    jQuery(uploadBox).appendTo("#uploadBoxes");
-  }
-
-  addUploadBox();
-
-  jQuery("#addUploadBox A").click(function () {
-    addUploadBox();
-  });
-
-  jQuery("#uploadForm").submit(function() {
-    return checkUploadStart();
-  });
-{/literal}
-{elseif $upload_mode eq 'multiple'}
-
-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("#uploadify").uploadify({
-    'uploader'       : uploadify_path + '/uploadify.php',
-    'langFile'       : uploadify_path + '/uploadifyLang_en.js',
-    'swf'            : uploadify_path + '/uploadify.swf',
-    'checkExisting'  : false,
-
-    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;
+	jQuery("#uploader").pluploadQueue({
+		// General settings
+		// runtimes : 'html5,flash,silverlight,html4',
+		runtimes : 'html5',
+
+		// url : '../upload.php',
+		url : 'ws.php?method=pwg.images.upload&format=json',
+
+		// 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"}
+			]
+		},
+
+		// 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,
+
+    init : {
+      BeforeUpload: function(up, file) {
+        console.log('[BeforeUpload]', file);
+
+        // 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">
diff --git a/admin/themes/default/theme.css b/admin/themes/default/theme.css
index 65025eef6..88928807f 100644
--- a/admin/themes/default/theme.css
+++ b/admin/themes/default/theme.css
@@ -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;}