From 0f5ccc9aa3d028fee093c733744064c24fb302b9 Mon Sep 17 00:00:00 2001
From: Bharat Mediratta <bharat@menalto.com>
Date: Tue, 17 Mar 2009 05:20:37 +0000
Subject: 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
---
 core/views/admin_maintenance_task.html.php |   6 +-
 core/views/simple_uploader.html.php        | 240 +++++++++++++++++++++++++----
 2 files changed, 214 insertions(+), 32 deletions(-)

(limited to 'core/views')

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>
-- 
cgit v1.2.3