New uploader based on javascript for Tidypics

5 files changed, 135 insertions, 46 deletions

diff --git a/languages/en.php b/languages/en.php
index 1c40e5e0a..9d8773efd 100644
--- a/languages/en.php
+++ b/languages/en.php
@@ -57,6 +57,13 @@ $english = array(
 			'tidypics:sort' => 'Sorting the %s album',
 			'tidypics:none' => 'No photo albums',
 			
+		//upload
+			'tidypics:upload:error' => 'Error:',
+			'tidypics:upload:maxfilesize' => 'File is too big',
+			'tidypics:upload:minfilesize' => 'File is too small',
+			'tidypics:upload:acceptfiletypes' => 'Filetype not allowed',
+			'tidypics:upload:maxnumberoffiles' => 'Max number of files exceeded',
+	
 		//settings
 			'tidypics:settings' => 'Settings',
 			'tidypics:settings:main' => 'Primary settings',
@@ -157,8 +164,7 @@ $english = array(
 			'tidypics:uploader:upload' => "Upload photos",
 			'tidypics:uploader:describe' => "Describe photos",
 			'tidypics:uploader:filedesc' => 'Image files (jpeg, png, gif)',
-			'tidypics:uploader:instructs' => 'There are three easy steps for adding photos to your album using this uploader: choosing, uploading, and describing them. There is a %s MB maximum per photo. If you do not have Flash, there is also a <a href="%s">basic uploader</a> available.',
-			'tidypics:uploader:basic' => 'You can upload up to 10 photos at a time (%s MB maximum per photo)',
+			'tidypics:uploader:help' => 'Tip: use <code>Ctrl</code> or <code>Shift</code> keys to select more than one file. You also can drag&drop photos from desktop.',
 			'tidypics:sort:instruct' => 'Sort the album photos by dragging and dropping the images. Then click the save button.',
 			'tidypics:sort:no_images' => 'No images found to sort. Upload images using the link above.',
 
diff --git a/pages/photos/image/upload.php b/pages/photos/image/upload.php
index 61be8523b..c8e57038c 100644
--- a/pages/photos/image/upload.php
+++ b/pages/photos/image/upload.php
@@ -38,7 +38,21 @@ elgg_push_breadcrumb($owner->name, "photos/owner/$owner->username");
 elgg_push_breadcrumb($album->getTitle(), $album->getURL());
 elgg_push_breadcrumb(elgg_echo('album:addpix'));
 
-$content = elgg_view('forms/photos/basic_upload', array('entity' => $album));
+// load javascript dependences
+elgg_load_js('jquery-tmpl');
+elgg_load_js('jquery-load-image');
+elgg_load_js('jquery-canvas-to-blob');
+elgg_load_js('jquery-fileupload');
+elgg_load_js('jquery-fileupload-ui');
+elgg_load_js('tidypics:upload');
+
+$form_vars = array(
+	'id' => 'fileupload',
+	'action' => 'action/photos/image/upload',
+	'enctype' => 'multipart/form-data',
+);
+
+$content = elgg_view_form('photos/basic_upload', $form_vars, array('entity' => $album));
 
 $body = elgg_view_layout('content', array(
 	'content' => $content,
diff --git a/start.php b/start.php
index 45e9257f5..376c7985d 100644
--- a/start.php
+++ b/start.php
@@ -38,12 +38,28 @@ function tidypics_init() {
 	$js = elgg_get_simplecache_url('js', 'photos/tidypics');
 	elgg_register_simplecache_view('js/photos/tidypics');
 	elgg_register_js('tidypics', $js, 'footer');
+	$js = elgg_get_simplecache_url('js', 'photos/upload');
+	elgg_register_simplecache_view('js/photos/upload');
+	elgg_register_js('tidypics:upload', $js, 'footer');
 	$js = elgg_get_simplecache_url('js', 'photos/tagging');
 	elgg_register_simplecache_view('js/photos/tagging');
 	elgg_register_js('tidypics:tagging', $js, 'footer');
 
 	elgg_register_js('tidypics:slideshow', 'mod/tidypics/vendors/PicLensLite/piclens_optimized.js', 'footer');
 	
+	$js_base = 'mod/tidypics/vendors/jquery-file-upload/js';
+	
+	elgg_register_js('jquery-tmpl', "http://blueimp.github.com/JavaScript-Templates/tmpl.js", 'footer');
+	elgg_register_js('jquery-load-image', "$js_base/vendor/load-image.min.js", 'footer');
+	elgg_register_js('jquery-canvas-to-blob', "$js_base/vendor/canvas-to-blob.min.js", 'footer');
+	elgg_register_js('jquery-image-gallery', "$js_base/vendor/jquery.image-gallery.min.js", 'footer');
+	elgg_register_js('jquery-iframe-transport', "$js_base/jquery.iframe-transport.js", 'footer');
+	
+	elgg_register_js('jquery-fileupload', "$js_base/jquery.fileupload.js", 'footer');
+	elgg_register_js('jquery-fileupload-fp', "$js_base/jquery.fileupload-fp.js", 'footer');
+	elgg_register_js('jquery-fileupload-ui', "$js_base/jquery.fileupload-ui.js", 'footer');
+	elgg_register_js('jquery-fileupload-jui', "$js_base/jquery.fileupload-jui.js", 'footer');
+	
 	// Add photos link to owner block/hover menus
 	elgg_register_plugin_hook_handler('register', 'menu:owner_block', 'tidypics_owner_block_menu');
 
diff --git a/views/default/forms/photos/basic_upload.php b/views/default/forms/photos/basic_upload.php
index ba849d1b4..9e71cf59e 100644
--- a/views/default/forms/photos/basic_upload.php
+++ b/views/default/forms/photos/basic_upload.php
@@ -1,48 +1,63 @@
 <?php
-/**
- * Basic uploader form
- *
- * This only handled uploading the images. Editing the titles and descriptions
- * are handled with the edit forms.
- *
- * @uses $vars['entity']
- *
- * @author Cash Costello
- * @license http://www.gnu.org/licenses/gpl-2.0.html GNU General Public License v2
- */
-
 $album = $vars['entity'];
-$access_id = $album->access_id;
+$help = elgg_echo('tidypics:uploader:help');
 
-$maxfilesize = (float) elgg_get_plugin_setting('maxfilesize', 'tidypics');
+$input = elgg_view('input/file', array(
+	'name' => 'images[]',
+	'multiple' => 'multiple',
+	'class' => 'hidden-js',
+));
 
-$instructions = elgg_echo("tidypics:uploader:upload");
-$max = elgg_echo('tidypics:uploader:basic', array($maxfilesize));
+$button = elgg_view('output/url', array(
+	'text' => elgg_echo('tidypics:uploader:upload') . $input,
+	'class' => 'elgg-button elgg-button-action fileinput-button',
+));
 
-$list = '';
-for ($x = 0; $x < 10; $x++) {
-	$list .= '<li>' . elgg_view('input/file', array('name' => 'images[]')) . '</li>';
-}
+$reset = elgg_view('input/reset', array(
+	'value' => elgg_echo('cancel'),
+	'class' => 'hidden',
+));
 
 $foot = elgg_view('input/hidden', array('name' => 'guid', 'value' => $album->getGUID()));
 $foot .= elgg_view('input/submit', array('value' => elgg_echo("save")));
 
-$form_body = <<<HTML
+echo <<<HTML
 <div>
 	$max
 </div>
-<div>
-	<ol>
-		$list
-	</ol>
+<div class="fileinput-container">
+	$button
+	$reset
+	<p class="elgg-text-help">$help</p>
+</div>
+<div class="mtm"><!-- The table listing the files available for upload/download -->
+        <table role="presentation" class="elgg-table-alt clearfloat mtm">
+			<tbody class="files"></tbody>
+		</table>
 </div>
 <div class='elgg-foot'>
 	$foot
 </div>
 HTML;
 
-echo elgg_view('input/form', array(
-	'body' => $form_body,
-	'action' => 'action/photos/image/upload',
-	'enctype' => 'multipart/form-data',
-));
+?>
+
+<noscript><style type="text/css">hidden-nojs {display: hidden}</style></noscript>
+
+<!-- The template to display files available for upload -->
+<script id="template-upload" type="text/x-tmpl">
+{% for (var i=0, file; file=o.files[i]; i++) { %}
+	<tr class="template-upload fade">
+		{% if (file.error) { %}
+			<td class="error"><span class="elgg-message elgg-state-error">{%=locale.fileupload.error%} {%=locale.fileupload.errors[file.error] || file.error%}</span></td>
+		{% } else { %}
+			<td class="preview"><span class="fade"></span></td>
+		{% } %}
+		<td class="name"><span>{%=file.name%}</span></td>
+		<td class="size"><span>{%=o.formatFileSize(file.size)%}</span></td>
+		
+	</tr>
+{% } %}
+</script>
+<!-- The template to display files available for download -->
+<script id="template-download" type="text/x-tmpl" />
diff --git a/views/default/photos/css.php b/views/default/photos/css.php
index 3f0218fdc..b031b825c 100644
--- a/views/default/photos/css.php
+++ b/views/default/photos/css.php
@@ -145,30 +145,68 @@
 }
 
 /* ***************************************
-	AJAX UPLOADER
+	UPLOADER
 *************************************** */
-#tidypics-uploader-steps {
-	list-style: none;
+
+.fileinput-container {
+	text-align: center;
+}
+.fileinput-button {
+	cursor: pointer;
 }
+.fileinput-button input {
+	position: absolute;
+	top: 0;
+	right: 0;
+	margin: 0;
+	opacity: 0;
+	filter: alpha(opacity=0);
 
-#tidypics-uploader-steps li a {
-	font-weight:bold;
+}
+.files .fade {
+  display: none;
+}
+/* Fix for IE 6: */
+*html .fileinput-button {
+  margin-right: -2px;
+}
+*html .fileinput-button .elgg-button {
+  line-height: 24px;
+}
+*html .fileupload-buttonbar .elgg-button {
+  margin-left: 3px;
 }
 
-.tidypics-choose-button-hover {
-	color:#0054a7;
-	text-decoration:underline;
+/* Fix for IE 7: */
+*+html .fileinput-button {
+  margin-right: 1px;
+}
+*+html .fileinput-button .elgg-button {
+  line-height: 24px;
+}
+*+html .fileupload-buttonbar .elgg-button {
+  margin-left: 3px;
 }
 
-.tidypics-disable {
-	color:#cccccc;
+@media (max-width: 480px) {
+  .files .preview * {
+    width: 40px;
+  }
+  .files .name * {
+    width: 80px;
+    display: inline-block;
+    word-wrap: break-word;
+  }
 }
 
-.tidypics-disable:hover {
-color:#cccccc;
-text-decoration:none;
+/* Fix for Webkit (Safari, Chrome) */
+@media screen and (-webkit-min-device-pixel-ratio:0) {
+  .fileinput-button {
+    margin-top: 2px;
+  }
 }
 
+
 <?php
 return true;
 ?>