flash uploader working

3 files changed, 190 insertions, 130 deletions

diff --git a/views/default/forms/photos/ajax_upload.php b/views/default/forms/photos/ajax_upload.php
index f0738994a..be25d628e 100644
--- a/views/default/forms/photos/ajax_upload.php
+++ b/views/default/forms/photos/ajax_upload.php
@@ -2,26 +2,22 @@
 /**
  * Tidypics ajax upload form body
  *
- * @uses $vars['album']
+ * @uses $vars['entity']
  */
 
-$album = $vars['album'];
+$album = $vars['entity'];
 
 $ts = time();
-$token = generate_action_token($ts);
 $batch = time();
-$tidypics_token = md5(session_id() . get_site_secret() . $ts . get_loggedin_user()->salt);
-
+$tidypics_token = md5(session_id() . get_site_secret() . $ts . elgg_get_logged_in_user_entity()->salt);
 $basic_uploader_url = current_page_url() . '/basic';
-$upload_endpoint_url = "{$vars['url']}action/tidypics/ajax_upload/";
-$upload_complete_url = "{$vars['url']}action/tidypics/ajax_upload_complete/";
 
-$maxfilesize = (float) get_plugin_setting('maxfilesize','tidypics');
+$maxfilesize = (float) elgg_get_plugin_setting('maxfilesize', 'tidypics');
 if (!$maxfilesize) {
 	$maxfilesize = 5;
 }
 
-$quota = get_plugin_setting('quota','tidypics');
+$quota = elgg_get_plugin_setting('quota', 'tidypics');
 if ($quota) {
 	$image_repo_size_md = get_metadata_byname($album->container_guid, "image_repo_size");
 	$image_repo_size = (int)$image_repo_size_md->value;
@@ -40,30 +36,32 @@ if ($quota) {
 
 ?>
 
-<div class="contentWrapper">
-
-	<p><?php echo sprintf(elgg_echo('tidypics:uploader:instructs'), $basic_uploader_url); ?></p>
+<p><?php echo elgg_echo('tidypics:uploader:instructs', array($basic_uploader_url)); ?></p>
 
-	<ul id="tidypics_uploader_steps">
-		<li>
-	<div id="tidypics_uploader">
-		<a id="tidypics_choose_button" href="<?php echo $basic_uploader_url; ?>">
-			1. <?php echo elgg_echo('tidypics:uploader:choose'); ?>
-		</a>
-		<div id="tidypics_flash_uploader">
-			<input type="file" id="uploadify" name="uploadify" />
-		</div>
-	</div>
-		</li>
-		<li>
-			<a id="tidypics_upload_button" class="tidypics_disable" href="javascript:$('#uploadify').uploadifyUpload();">
-				2. <?php echo elgg_echo('tidypics:uploader:upload'); ?>
+<ul id="tidypics-uploader-steps">
+	<li class="mbm">
+		<div id="tidypics-uploader">
+			<a id="tidypics-choose-button" href="<?php echo $basic_uploader_url; ?>">
+				1. <?php echo elgg_echo('tidypics:uploader:choose'); ?>
 			</a>
-		</li>
-		<li>
-			<a id="tidypics_describe_button" class="tidypics_disable" href="<?php echo $vars['url']; ?>pg/photos/batch/<?php echo $batch; ?>">
-				3. <?php echo elgg_echo('tidypics:uploader:describe'); ?>
-			</a>
-		</li>
-	</ul>
-</div>
+			<div id="tidypics-flash-uploader">
+				<input type="file" id="uploadify" name="uploadify" class="hidden" />
+				<input type="hidden" name="album_guid" value="<?php echo $album->getGUID(); ?>" />
+				<input type="hidden" name="batch" value="<?php echo $batch; ?>" />
+				<input type="hidden" name="tidypics_token" value="<?php echo $tidypics_token; ?>" />
+				<input type="hidden" name="user_guid" value="<?php echo elgg_get_logged_in_user_guid(); ?>" />
+				<input type="hidden" name="Elgg" value="<?php echo session_id(); ?>" />
+			</div>
+		</div>
+	</li>
+	<li class="mbm">
+		<a id="tidypics-upload-button" class="tidypics-disable" href="#">
+			2. <?php echo elgg_echo('tidypics:uploader:upload'); ?>
+		</a>
+	</li>
+	<li class="mbm">
+		<a id="tidypics-describe-button" class="tidypics-disable" href="#">
+			3. <?php echo elgg_echo('tidypics:uploader:describe'); ?>
+		</a>
+	</li>
+</ul>
diff --git a/views/default/js/photos/uploading.php b/views/default/js/photos/uploading.php
index 59448dd46..cb79dc77c 100644
--- a/views/default/js/photos/uploading.php
+++ b/views/default/js/photos/uploading.php
@@ -1,27 +1,92 @@
 <?php
 /**
- *
+ * AJAX uploading
  */
-
-$site_url = elgg_get_site_url();
-$upload_endpoint_url = "{$site_url}action/tidypics/ajax_upload/";
-$upload_complete_url = "{$site_url}action/tidypics/ajax_upload_complete/";
-
 ?>
 
+//<script>
 elgg.provide('elgg.tidypics.uploading');
 
 elgg.tidypics.uploading.init = function() {
+
+	var fields = ['Elgg', 'user_guid', 'album_guid', 'batch', 'tidypics_token'];
+	var data = elgg.security.token;
+
+	$(fields).each(function(i, name) {
+		var value = $('input[name=' + name + ']').val();
+		if (value) {
+			data[name] = value;
+		}
+	});
+
+	data['XDEBUG_SESSION_START'] = 'netbeans-xdebug';
+
 	$("#uploadify").uploadify({
-		'uploader'     : '<?php echo $site_url; ?>mod/tidypics/vendors/uploadify/uploadify.swf',
-		'script'       : '<?php echo $upload_endpoint_url; ?>',
+		'uploader'     : elgg.config.wwwroot + 'mod/tidypics/vendors/uploadify/uploadify.swf',
+		'script'       : elgg.config.wwwroot + 'action/photos/image/ajax_upload',
+		'cancelImg'    : elgg.config.wwwroot + 'mod/tidypics/vendors/uploadify/cancel.png',
 		'fileDataName' : 'Image',
 		'multi'        : true,
 		'auto'         : false,
 		'wmode'        : 'transparent',
 		'buttonImg'    : " ",
-		'height'       : 20,
-		'width'        : 130
+		'height'       : $('#tidypics-choose-button').height(),
+		'width'        : $('#tidypics-choose-button').width(),
+		'scriptData'   : data,
+		'onEmbedFlash' : function(event) {
+			// @todo This is supposed to mimick hovering over the link.
+			// hover events aren't firing for the object.
+			$("#" + event.id).hover(
+				function(){
+					$("#tidypics-choose-button").addClass('tidypics-choose-button-hover');
+				},
+				function(){
+					$("#tidypics-choose-button").removeClass('tidypics-choose-button-hover');
+				}
+			);
+		},
+		'onSelectOnce'  : function() {
+			$("#tidypics-upload-button").removeClass('tidypics-disable');
+		},
+		'onAllComplete' : function() {
+			// @todo they can keep adding pics if they want. no need to disable this.
+			$("#tidypics-choose-button").addClass('tidypics-disable');
+			$("#tidypics-upload-button").addClass('tidypics-disable').die();
+			$("#tidypics-describe-button").removeClass('tidypics-disable');
+
+			elgg.action('photos/image/ajax_upload_complete', {
+				data: {
+					album_guid: data.album_guid,
+					batch: data.batch
+				},
+				success: function(json) {
+					var url = elgg.normalize_url('photos/edit/' + json.batch_guid)
+					$('#tidypics-describe-button').attr('href', url);
+				}
+			});
+		},
+		'onComplete'    : function(event, queueID, fileObj, response) {
+			// check for errors here
+			if (response != 'success') {
+				$("#uploadify" + queueID + " .percentage").text(" - " + response);
+				$("#uploadify" + queueID).addClass('uploadifyError');
+			}
+			$("#uploadify" + queueID + " > .cancel").remove();
+			return false;
+		},
+		'onCancel'      : function(event, queueID, fileObj, data) {
+			if (data.fileCount == 0) {
+				$("#tidypics-upload-button").addClass('tidypics-disable');
+			}
+		}
+
+	});
+
+	// bind to upload button
+	$('#tidypics-upload-button').live('click', function(e) {
+		var $uploadify = $('#uploadify');
+		$uploadify.uploadifyUpload();
+		e.preventDefault();
 	});
 }
 
diff --git a/views/default/photos/css.php b/views/default/photos/css.php
index 3e448f27a..2290e1f9a 100644
--- a/views/default/photos/css.php
+++ b/views/default/photos/css.php
@@ -130,12 +130,82 @@
 	Tagging
 *************************************** */
 #tidypics_uploader {
-position:relative;
-width:400px;
-min-height:20px;
+	position:relative;
+	width:400px;
+	min-height:20px;
 }
 
 #tidypics_choose_button {
+	position:absolute;
+	top:0;
+	left:0;
+	z-index:0;
+	display:block;
+	float:left;
+}
+
+#tidypics_flash_uploader {
+	position:relative;
+	z-index:100;
+}
+
+/* ***************************************
+	AJAX UPLOADER
+*************************************** */
+#tidypics-uploader-steps {
+	list-style: none;
+}
+
+#tidypics-uploader-steps li a {
+	font-weight:bold;
+}
+
+.tidypics-choose-button-hover {
+	color:#0054a7;
+	text-decoration:underline;
+}
+
+.tidypics-disable {
+	color:#cccccc;
+}
+
+.tidypics-disable:hover {
+color:#cccccc;
+text-decoration:none;
+}
+
+
+.uploadifyQueueItem {
+background-color:#F5F5F5;
+border:2px solid #E5E5E5;
+font-size:11px;
+margin-top:5px;
+padding:10px;
+width:350px;
+}
+
+.uploadifyProgress {
+background-color:#FFFFFF;
+border-color:#808080 #C5C5C5 #C5C5C5 #808080;
+border-style:solid;
+border-width:1px;
+margin-top:10px;
+width:100%;
+}
+
+.uploadifyProgressBar {
+background-color: #0054a7;
+width: 1px;
+height: 3px;
+}
+
+#tidypics-uploader {
+	position:relative;
+	width:400px;
+	min-height:20px;
+}
+
+#tidypics-choose-button {
 position:absolute;
 top:0;
 left:0;
@@ -144,11 +214,20 @@ display:block;
 float:left;
 }
 
-#tidypics_flash_uploader {
+#tidypics-flash-uploader {
 position:relative;
 z-index:100;
 }
 
+.uploadifyQueueItem .cancel {
+	float: right;
+}
+
+.uploadifyError {
+border: 2px solid #FBCBBC;
+background-color: #FDE5DD;
+}
+
 <?php
 return true;
 ?>
@@ -465,88 +544,6 @@ display:inline;
 list-style: none;
 }
 
-/*----- uploadify ------*/
-
-#tidypics_uploader_steps {
-list-style:none;
-}
-
-#tidypics_uploader_steps li {
-margin-bottom: 20px;
-}
-
-#tidypics_uploader_steps li a {
-font-weight:bold;
-}
-
-.tidypics_choose_button_hover {
-color:#0054a7;
-text-decoration:underline;
-}
-
-.tidypics_disable {
-color:#cccccc;
-}
-
-.tidypics_disable:hover {
-color:#cccccc;
-text-decoration:none;
-}
-
-
-.uploadifyQueueItem {
-background-color:#F5F5F5;
-border:2px solid #E5E5E5;
-font-size:11px;
-margin-top:5px;
-padding:10px;
-width:350px;
-}
-
-.uploadifyProgress {
-background-color:#FFFFFF;
-border-color:#808080 #C5C5C5 #C5C5C5 #808080;
-border-style:solid;
-border-width:1px;
-margin-top:10px;
-width:100%;
-}
-
-.uploadifyProgressBar {
-background-color: #0054a7;
-width: 1px;
-height: 3px;
-}
-
-#tidypics_uploader {
-position:relative;
-width:400px;
-min-height:20px;
-}
-
-#tidypics_choose_button {
-position:absolute;
-top:0;
-left:0;
-z-index:0;
-display:block;
-float:left;
-}
-
-#tidypics_flash_uploader {
-position:relative;
-z-index:100;
-}
-
-.uploadifyQueueItem .cancel {
-float: right;
-}
-
-.uploadifyError {
-border: 2px solid #FBCBBC;
-background-color: #FDE5DD;
-}
-
 #tidypics_album_sort {
 padding:0;
 margin:0;