Switch from using SimpleUploader to using swfUpload as our flash based

uploader.  This is modeled on
http://codex.gallery2.org/Gallery3:Upload_UX but is not yet complete.

Notes:
* Changed #gProgressBar to .gProgressBar to support multiple progress
  bars on the same page
* Added a bunch of CSS to the "needs a home" section in
  themes/default/css/screen.css

4 files changed, 217 insertions, 47 deletions

diff --git a/core/SimpleUploader.swf b/core/SimpleUploader.swf
deleted file mode 100644
index 152917b1..00000000
--- a/core/SimpleUploader.swf
+++ /dev/null
diff --git a/core/controllers/simple_uploader.php b/core/controllers/simple_uploader.php
index 67b86e7a..c369e9f2 100644
--- a/core/controllers/simple_uploader.php
+++ b/core/controllers/simple_uploader.php
@@ -24,19 +24,6 @@ class Simple_Uploader_Controller extends Controller {
 
     $v = new View("simple_uploader.html");
     $v->item = $item;
-    $v->flash_vars =
-      "uploadUrl=" . urlencode(
-        url::site("simple_uploader/add_photo/$item->id" .
-                  "?csrf=" . access::csrf_token() .
-                  "&g3sid=" . Session::instance()->id() .
-                  "&user_agent=" . urlencode(Input::instance()->server("HTTP_USER_AGENT")))) .
-      "&title=" . urlencode(t("Add photos")) .
-      "&addLabel=" . urlencode(t("Choose photos to add...")) .
-      "&pendingText=" . urlencode(t("Pending")) .
-      "&completeText=" . urlencode(t("Complete")) .
-      "&fileHeader=" . urlencode(t("File")) .
-      "&statusHeader=" . urlencode(t("Status")) .
-      "&sizeHeader=" . urlencode(t("Size"));
     print $v;
   }
 
@@ -50,7 +37,7 @@ class Simple_Uploader_Controller extends Controller {
     access::verify_csrf();
 
     $file_validation = new Validation($_FILES);
-    $file_validation->add_rules("file", "upload::valid", "upload::type[gif,jpg,png,flv,mp4]");
+    $file_validation->add_rules("Filedata", "upload::valid", "upload::type[gif,jpg,png,flv,mp4]");
     if ($file_validation->validate()) {
 
       // SimpleUploader.swf does not yet call /start directly, so simulate it here for now.
@@ -58,7 +45,7 @@ class Simple_Uploader_Controller extends Controller {
         batch::start();
       }
 
-      $temp_filename = upload::save("file");
+      $temp_filename = upload::save("Filedata");
       try {
         $title = substr(basename($temp_filename), 10);  // Skip unique identifier Kohana adds
         $path_info = pathinfo($temp_filename);
@@ -77,6 +64,7 @@ class Simple_Uploader_Controller extends Controller {
       }
       unlink($temp_filename);
     }
+    print "File Received";
   }
 
   public function finish() {
diff --git a/core/views/admin_maintenance_task.html.php b/core/views/admin_maintenance_task.html.php
index 1b64ffb3..1ee02311 100644
--- a/core/views/admin_maintenance_task.html.php
+++ b/core/views/admin_maintenance_task.html.php
@@ -5,7 +5,7 @@
       url: "<?= url::site("admin/maintenance/run/$task->id?csrf=$csrf") ?>",
       dataType: "json",
       success: function(data) {
-        $("#gProgressBar").progressbar("value", data.task.percent_complete);
+        $(".gProgressBar").progressbar("value", data.task.percent_complete);
         $("#gStatus").html("" + data.task.status);
         if (data.task.done) {
           $("#gPauseButton").hide();
@@ -16,14 +16,14 @@
       }
     });
   }
-  $("#gProgressBar").progressbar({value: 0});
+  $(".gProgressBar").progressbar({value: 0});
   update();
   dismiss = function() {
     window.location.reload();
   }
 </script>
 <div id="gProgress">
-  <div id="gProgressBar"></div>
+  <div class="gProgressBar"></div>
   <div id="gStatus"></div>
   <div>
     <button id="gPauseButton" class="ui-state-default ui-corner-all" onclick="dismiss()"><?= t("Pause") ?></button>
diff --git a/core/views/simple_uploader.html.php b/core/views/simple_uploader.html.php
index 0d1d4ee2..064f88fc 100644
--- a/core/views/simple_uploader.html.php
+++ b/core/views/simple_uploader.html.php
@@ -1,34 +1,216 @@
 <?php defined("SYSPATH") or die("No direct script access.") ?>
-<!-- hack to get this string into the dialog's titlebar -->
-<form id="gAddPhotos" action="<?= url::site("simple_uploader/finish") ?>">
+<script type="text/javascript" src="<?= url::file("lib/swfupload/swfupload.js") ?>"></script>
+<script type="text/javascript" src="<?= url::file("lib/swfupload/swfupload.queue.js") ?>"></script>
+
+<!-- hack to set the title for the dialog -->
+<form id="gAddPhotosForm" action="<?= url::site("simple_uploader/finish") ?>">
   <fieldset>
     <legend> <?= t("Add photos to %album_title", array("album_title" => $item->title)) ?> </legend>
   </fieldset>
-
-  <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
-          id="SimpleUploader"
-          width="470px"
-          height="400px"
-          codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
-    <param name="movie" value="<?= url::file("core/SimpleUploader.swf") ?>" />
-    <param name="flashVars" value="<?= $flash_vars ?>" />
-    <param name="quality" value="high" />
-    <param name="bgcolor" value="#ffffff" />
-    <param name="allowScriptAccess" value="sameDomain" />
-    <embed src="<?= url::file("core/SimpleUploader.swf") ?>"
-           quality="high"
-           bgcolor="#ffffff"
-           flashVars="<?= $flash_vars ?>"
-           width="470" height="400" name="<?= url::file("core/SimpleUploader.swf") ?>"
-           align="middle"
-           play="true"
-           loop="false"
-           quality="high"
-           allowScriptAccess="sameDomain"
-           type="application/x-shockwave-flash"
-           pluginspage="http://www.adobe.com/go/getflashplayer">
-    </embed>
-  </object>
-
-  <input type="submit" class="ui-state-default ui-corner-all" value="<?= t("Finish") ?>"/>
 </form>
+
+<div id="gAddPhotos">
+  <p>
+    <?= t("Photos will be uploaded to album: ") ?>
+  </p>
+  <ul>
+    <? foreach ($item->parents() as $parent): ?>
+    <li> <?= $parent->title ?> </li>
+    <? endforeach ?>
+    <li class="active"> <?= $item->title ?> </li>
+  </ul>
+
+  <p><?= t("Upload Queue") ?></p>
+  <div id="gAddPhotosCanvas">
+    <div id="gAddPhotosQueue"></div>
+    <div id="gEditPhotosQueue"></div>
+  </div>
+  <span id="gChooseFilesButtonPlaceholder"></span>
+  <button id="gUploadCancel" type="button"
+          onclick="swfu.cancelQueue();"
+          disabled="disabled">
+    <?= t("Cancel all") ?>
+  </button>
+
+  <!-- Proxy the done request back to our form, since its been ajaxified -->
+  <button onclick="$('#gAddPhotosForm').submit()">
+    <?= t("Done") ?>
+  </button>
+</div>
+
+<script type="text/javascript">
+  var swfu = new SWFUpload({
+    flash_url : "<?= url::file("lib/swfupload/swfupload.swf") ?>",
+    upload_url: "<?= url::site("simple_uploader/add_photo/$item->id") ?>",
+    post_params: {
+      "g3sid": "<?= Session::instance()->id() ?>",
+      "user_agent": "<?= Input::instance()->server("HTTP_USER_AGENT") ?>",
+      "csrf": "<?= access::csrf_token() ?>"
+    },
+    file_size_limit : "100 MB",
+    file_types : "*.gif;*.jpg;*.png;*.flv;*.mp4",
+    file_types_description : "<?= t("Photos and Movies") ?>",
+    file_upload_limit : 100,
+    file_queue_limit : 0,
+    custom_settings : { },
+    debug: false,
+
+    // Button settings
+    // button_image_url: "...",
+    button_width: "130",
+    button_height: "29",
+    button_placeholder_id: "gChooseFilesButtonPlaceholder",
+    button_text: '<span class="swfUploadFont">Select photos...</span>',
+    button_text_style: ".swfUploadFont { font-size: 18; }",
+    button_text_left_padding: 12,
+    button_text_top_padding: 3,
+
+    // The event handler functions are defined in handlers.js
+    file_queued_handler : file_queued,
+    file_queue_error_handler : file_queue_error,
+    file_dialog_complete_handler : file_dialog_complete,
+    upload_start_handler : upload_start,
+    upload_progress_handler : upload_progress,
+    upload_error_handler : upload_error,
+    upload_success_handler : upload_success,
+    upload_complete_handler : upload_complete,
+    queue_complete_handler : queue_complete
+  });
+
+  // @todo add support for cancelling individual uploads
+  function File_Progress(file) {
+    this.box = $("#" + file.id);
+    if (!this.box.length) {
+      $("#gAddPhotosQueue").append(
+        "<div class=\"box\" id=\"" + file.id + "\">" +
+        "<div class=\"title\"></div>" +
+        "<div class=\"status\"></div>" +
+        "<div class=\"progressbar\"></div></div>");
+      this.box = $("#" + file.id);
+    }
+    this.title = this.box.find(".title");
+    this.status = this.box.find(".status");
+    this.progress_bar = this.box.find(".progressbar");
+    this.progress_bar.progressbar();
+    this.progress_bar.css("visibility", "hidden");
+  }
+
+  File_Progress.prototype.set_status = function(status_class, msg) {
+    this.box.removeClass("pending error uploading complete").addClass(status_class);
+    this.status.html(msg);
+  }
+
+  function file_queued(file) {
+    var fp = new File_Progress(file);
+    fp.title.html(file.name);
+    fp.set_status("pending", "<?= t("Pending...") ?>");
+    // @todo add cancel button to call this.cancelUpload(file.id)
+  }
+
+  function file_queue_error(file, error_code, message) {
+    if (error_code === SWFUpload.QUEUE_ERROR.QUEUE_LIMIT_EXCEEDED) {
+      alert("<?= t("You have attempted to queue too many files.") ?>");
+      return;
+    }
+
+    var fp = new File_Progress(file);
+    switch (error_code) {
+    case SWFUpload.QUEUE_ERROR.FILE_EXCEEDS_SIZE_LIMIT:
+      fp.set_status("error", "<?= t("File is too big.") ?>");
+      break;
+    case SWFUpload.QUEUE_ERROR.ZERO_BYTE_FILE:
+      fp.set_status("error", "<?= t("Cannot upload empty files.") ?>");
+      break;
+    case SWFUpload.QUEUE_ERROR.INVALID_FILETYPE:
+      fp.set_status("error", "<?= t("Invalid file type.") ?>");
+      break;
+    default:
+      if (file !== null) {
+        fp.set_status("error", "<?= t("Unknown error") ?>");
+      }
+      break;
+    }
+  }
+
+  function file_dialog_complete(num_files_selected, num_files_queued) {
+    if (num_files_selected > 0) {
+      $("#gUploadCancel").enable(true);
+    }
+
+    // Auto start the upload
+    this.startUpload();
+  }
+
+  function upload_start(file) {
+    // Do all file validation on the server side.  Update the UI here because in Linux
+    // no uploadProgress events are called (limitation in the Linux Flash VM).
+    var fp = new File_Progress(file);
+    fp.title.html(file.name);
+    fp.set_status("uploading", "<?= t("Uploading...") ?>");
+    return true;
+    // @todo add cancel button to call this.cancelUpload(file.id)
+  }
+
+  function upload_progress(file, bytes_loaded, bytes_total) {
+    var percent = Math.ceil((bytes_loaded / bytes_total) * 100);
+    var fp = new File_Progress(file);
+    fp.set_status("uploading", "<?= t("Uploading...") ?>");
+    fp.progress_bar.css("visibility", "visible");
+    fp.progress_bar.progressbar("value", percent);
+  }
+
+  function upload_success(file, serverData) {
+    var fp = new File_Progress(file);
+    fp.progress_bar.progressbar("value", 100);
+    fp.set_status("complete", "<?= t("Complete.") ?>");
+  }
+
+  function upload_error(file, error_code, message) {
+    var fp = new File_Progress(file);
+    switch (error_code) {
+    case SWFUpload.UPLOAD_ERROR.HTTP_ERROR:
+      fp.set_status("error", "<?= t("Upload error: ") ?>" + message);
+      break;
+    case SWFUpload.UPLOAD_ERROR.UPLOAD_FAILED:
+      fp.set_status("error", "<?= t("Upload failed") ?>");
+      break;
+    case SWFUpload.UPLOAD_ERROR.IO_ERROR:
+      fp.set_status("error", "<?= t("Server error") ?>");
+      break;
+    case SWFUpload.UPLOAD_ERROR.SECURITY_ERROR:
+      fp.set_status("error", "<?= t("Security error") ?>");
+      break;
+    case SWFUpload.UPLOAD_ERROR.UPLOAD_LIMIT_EXCEEDED:
+      fp.set_status("error", "<?= t("Upload limit exceeded") ?>");
+      break;
+    case SWFUpload.UPLOAD_ERROR.FILE_VALIDATION_FAILED:
+      fp.set_status("error", "<?= t("Failed validation.  File skipped") ?>");
+      break;
+    case SWFUpload.UPLOAD_ERROR.FILE_CANCELLED:
+      // If there aren't any files left (they were all cancelled) disable the cancel button
+      if (this.getStats().files_queued === 0) {
+        $("#gUploadCancel").enable(false);
+      }
+      fp.set_status("error", "<?= t("Cancelled") ?>");
+      break;
+    case SWFUpload.UPLOAD_ERROR.UPLOAD_STOPPED:
+      fp.set_status("error", "<?= t("Stopped") ?>");
+      break;
+    default:
+      fp.set_status("error", "<?= t("Unknown error: ") ?>" + error_code);
+      break;
+    }
+  }
+
+  function upload_complete(file) {
+    if (this.getStats().files_queued === 0) {
+      $("#gUploadCancel").enable(false);
+    }
+  }
+
+  // This event comes from the Queue Plugin
+  function queue_complete(num_files_uploaded) {
+    var status_msg = "<?= t("Uploaded: __COUNT__") ?>";
+    $("#gUploadStatus").html(status_msg.replace("__COUNT__", num_files_uploaded));
+  }
+</script>