Skip to content
Browse files

FLUID-4238: Refactored Cindy's new Image Gallery Uploader server demo…

…, IoCifying it and fixing the IE infinite loop bug.

 * Refacored the code into a series of view components wired together using IoC
 * Call SWFUpload.destroy() and remove old DOM before reinstantiating the Uploader
 * Accidentally removed [INFUSION_PATH] tokens--will find another strategy for doing this
  • Loading branch information...
1 parent be14a81 commit 0752e46dc8a01fe0c4e543a2eb292ab8161a267b @colinbdclark colinbdclark committed May 16, 2011
Showing with 264 additions and 104 deletions.
  1. +204 −52 js/uploader.js
  2. +48 −52 uploader.html
  3. +12 −0 uploader.php
View
256 js/uploader.js
@@ -1,74 +1,226 @@
-/*global jQuery*/
-/*global fluid*/
+/*
+Copyright 2011 OCAD University
+
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+
+// Declare dependencies
+/*global fluid_1_4:true, jQuery*/
+
+// JSLint options
+/*jslint white: true, funcinvoke: true, undef: true, newcap: true, nomen: true, regexp: true, bitwise: true, browser: true, forin: true, maxerr: 100, indent: 4 */
var demo = demo || {};
(function ($, fluid) {
- demo.initUploader = function () {
- var sessionID = Math.random().toString(16).substring(2);
-
- // Load the Uploader's template via AJAX and inject it into this page.
- var templateURLSelector = "[INFUSION_PATH]/src/webapp/components/uploader/html/Uploader.html .fl-uploader";
- var defaultAllowedFileType = "*.gif;*.jpeg;*.jpg;*.png;*.tiff;*.tif";
- var defaultFileSizeLimit = "20480";
- var defaultfileUploadLimit = 0;
-
- var instantiateUploader = function (fileType, fileSize, fileUpload) {
- $("#multi-file-uploader").load(templateURLSelector, null, function () {
+
+ /**
+ * ImageGallery represents the client-side behaviour for the Uploader Image Gallery demo.
+ */
+ fluid.defaults("demo.imageGallery", {
+ gradeNames: ["fluid.viewComponent", "autoInit"],
+ finalInitFunction: "demo.imageGallery.init",
+
+ components: {
+ checker: {
+ type: "fluid.progressiveCheckerForComponent",
+ options: {
+ componentName: "fluid.uploader"
+ }
+ },
- // Initialize the Uploader
- fluid.uploader(".flc-uploader", {
+ uploader: {
+ type: "fluid.uploader",
+ createOnEvent: "onReady",
+ container: "{imageGallery}.dom.uploader",
+ options: {
components: {
strategy: {
options: {
flashMovieSettings: {
- flashURL: "[INFUSION_PATH]/src/webapp/lib/swfupload/flash/swfupload.swf",
- flashButtonImageURL: "[INFUSION_PATH]/src/webapp/components/uploader/images/browse.png"
+ flashURL: "../infusion/src/webapp/lib/swfupload/flash/swfupload.swf",
+ flashButtonImageURL: "../infusion/src/webapp/components/uploader/images/browse.png"
}
}
}
},
queueSettings: {
- // Set the uploadURL to the URL for posting files to your server.
- uploadURL: "uploader.php?session=" + sessionID,
- fileTypes: fileType,
- fileSizeLimit: fileSize,
- fileUploadLimit: fileUpload
+ uploadURL: "{imageGallery}.uploadURL",
+ fileTypes: ["image/gif", "image/jpeg", "image/png", "image/tiff"],
+ fileSizeLimit: "20480",
+ fileUploadLimit: 0
},
listeners: {
- onFileSuccess: function (file, responseText, xhr) {
- // the server code passes the new image URL in the responseText
- $('#image-space').append('<img src="' + responseText + '" alt="' + file.name + '" class="image-frame" />');
- },
- onFileError: function (file, error, status, xhr) {
- $('#server-error').append(file.name + " : Failed uploading. HTTP Status Code: " + status + "<br />");
- }
+ onFileSuccess: "{imagesView}.showFile",
+ onFileError: "{errorsView}.showError"
}
- });
+ }
+ },
+
+ imagesView: {
+ type: "demo.imageGallery.imagesView",
+ container: "{imageGallery}.dom.images"
+ },
+
+ errorsView: {
+ type: "demo.imageGallery.errorsView",
+ container: "{imageGallery}.dom.errors"
+ },
+
+ settings: {
+ type: "demo.imageGallery.settings",
+ createOnEvent: "onReady"
+ }
+ },
+
+ selectors: {
+ uploader: "#multi-file-uploader",
+ settings: "#multi-file-uploader-settings",
+ images: "#image-space",
+ errors: "#server-error"
+ },
+
+ events: {
+ onReady: null
+ },
+
+ templateURLSelector: "../infusion/src/webapp/components/uploader/html/Uploader.html .fl-uploader",
+ serverURLPrefix: "uploader.php?session="
+ });
+
+ demo.imageGallery.init = function (that) {
+ that.sessionID = Math.random().toString(16).substring(2);
+ that.uploadURL = that.options.serverURLPrefix + that.sessionID;
+
+ that.loadUploaderTemplate = function () {
+ that.locate("uploader").load(that.options.templateURLSelector, null, function () {
+ that.events.onReady.fire();
});
-
- // show the section of adjusting multi-file uploader settings only if the multi-file uploader is presented
- if (typeof fluid.staticEnvironment.supportsBinaryXHR != 'undefined' ||
- typeof fluid.staticEnvironment.supportsFormData != 'undefined' ||
- typeof fluid.staticEnvironment.supportsFlash != 'undefined') {
- $("#multi-file-uploader-settings").removeClass("hide-me");
- } else {
- $("#multi-file-uploader-settings").addClass("hide-me");
- }
};
- $("input").change(function (){
- var allowedFileType = $.trim($("#allowed-file-type").val());
- var fileSizeLimit = $.trim($("#file-size-limit").val());
- var fileUploadLimit = $.trim($("#file-queue-limit").val());
-
- allowedFileType = (allowedFileType === "") ? defaultAllowedFileType : allowedFileType;
- fileSizeLimit = (fileSizeLimit === "") ? defaultFileSizeLimit : parseInt(fileSizeLimit);
- fileUploadLimit = (fileUploadLimit === "") ? defaultfileUploadLimit : parseInt(fileUploadLimit);
-
- instantiateUploader(allowedFileType, fileSizeLimit, fileUploadLimit);
- });
+ that.destroyUploader = function () {
+ if (typeof (that.uploader.strategy.engine) !== "undefined") {
+ that.uploader.strategy.engine.swfUpload.destroy();
+ }
+ that.locate("uploader").empty();
+ };
+
+ that.resetUploader = function (options) {
+ // TODO: use {imageGallery}.options.component.uploader.options.queueSetting as
+ // the model for the Settings component.
+ var queueSettings = that.options.components.uploader.options.queueSettings;
+ fluid.each(options, function (value, key) {
+ queueSettings[key] = value;
+ });
+ that.destroyUploader();
+ that.loadUploaderTemplate();
+ };
+
+ that.loadUploaderTemplate();
+ };
+
+ demo.imageGallery.renderAndAppend = function(container, template, values) {
+ var renderedMarkup = fluid.stringTemplate(template, values);
+ container.append(renderedMarkup);
+ };
+
+ /**
+ * ImagesView manages the displayed images area of the page.
+ */
+ fluid.defaults("demo.imageGallery.imagesView", {
+ gradeNames: ["fluid.viewComponent", "autoInit"],
+ invokers: {
+ showFile: {
+ funcName: "demo.imageGallery.renderAndAppend",
+ args: [
+ "{imagesView}.container",
+ "{imagesView}.options.imageMarkup",
+ {
+ fileName: "{arguments}.0.name",
+ srcURL: "{arguments}.1"
+ }
+ ]
+ }
+ },
+ imageMarkup: "<img src='%srcURL' alt='%fileName' class='image-frame' />"
+ });
+
+ /**
+ * ErrorsView displays any server errors to the user.
+ */
+ fluid.defaults("demo.imageGallery.errorsView", {
+ gradeNames: ["fluid.viewComponent", "autoInit"],
+ invokers: {
+ showError: {
+ funcName: "demo.imageGallery.renderAndAppend",
+ args: [
+ "{errorsView}.container",
+ "{errorsView}.options.errorMarkup",
+ {
+ fileName: "{arguments}.0.name",
+ statusCode: "{arguments}.2"
+ }
+ ]
+ }
+ },
+ errorMarkup: "<div>%fileName failed to upload. HTTP status code: %statusCode</div>"
+ });
+
+ /**
+ * Settings controls the form that allow a user to customize the Uploader's options.
+ */
+ fluid.defaults("demo.imageGallery.settings", {
+ gradeNames: ["fluid.viewComponent", "autoInit"],
+ finalInitFunction: "demo.imageGallery.settings.init",
+ selectors: {
+ fileTypes: "#allowed-file-type",
+ fileSizeLimit: "#file-size-limit",
+ fileUploadLimit: "#file-queue-limit",
+ inputs: "input"
+ },
+ events: {
+ onOptionChanged: null
+ },
+ listeners: {
+ onOptionChanged: "{imageGallery}.resetUploader"
+ }
+ });
+
+ demo.imageGallery.settings.init = function (that) {
+ that.container.removeClass("hide-me");
+
+ // TODO: Use the renderer and data binding for this.
+ that.locate("inputs").change(function () {
+ // Trim and parse input from the form fields.
+ var options = {
+ fileTypes: $.trim(that.locate("fileTypes").val()),
+ fileSizeLimit: parseInt($.trim(that.locate("fileSizeLimit").val()), 10),
+ fileUploadLimit: parseInt($.trim(that.locate("fileUploadLimit").val()), 10)
+ };
+
+ // Delete any empty options so we don't override the default.
+ fluid.each(options, function (value, key) {
+ if (!value) {
+ delete options[key];
+ }
+ });
- instantiateUploader(defaultAllowedFileType, defaultFileSizeLimit, defaultfileUploadLimit);
+ that.events.onOptionChanged.fire(options);
+ });
};
-})(jQuery, fluid);
+
+ fluid.demands("demo.imageGallery.settings", ["demo.imageGallery", "fluid.uploader.multiFileUploader"], {
+ funcName: "demo.imageGallery.settings",
+ container: "{imageGallery}.dom.settings"
+ });
+
+ fluid.demands("demo.imageGallery.settings", ["demo.imageGallery", "fluid.uploader.singleFileUploader"], {
+ funcName: "fluid.emptySubcomponent"
+ });
+
+})(jQuery, fluid);
View
100 uploader.html
@@ -4,36 +4,36 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uploader</title>
- <link rel="stylesheet" type="text/css" href="[INFUSION_PATH]/src/webapp/framework/fss/css/fss-reset.css" />
- <link rel="stylesheet" type="text/css" href="[INFUSION_PATH]/src/webapp/framework/fss/css/fss-layout.css" />
- <link rel="stylesheet" type="text/css" href="[INFUSION_PATH]/src/webapp/components/uploader/css/Uploader.css" />
+ <link rel="stylesheet" type="text/css" href="../infusion/src/webapp/framework/fss/css/fss-reset.css" />
+ <link rel="stylesheet" type="text/css" href="../infusion/src/webapp/framework/fss/css/fss-layout.css" />
+ <link rel="stylesheet" type="text/css" href="../infusion/src/webapp/components/uploader/css/Uploader.css" />
<link rel="stylesheet" type="text/css" href="css/styles.css" />
<!-- Fluid and jQuery Dependencies -->
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/lib/jquery/core/js/jquery.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/lib/jquery/ui/js/jquery.ui.core.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/lib/swfobject/js/swfobject.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/lib/swfupload/js/swfupload.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/lib/json/js/json2.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/lib/jquery/core/js/jquery.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/lib/jquery/ui/js/jquery.ui.core.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/lib/swfobject/js/swfobject.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/lib/swfupload/js/swfupload.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/lib/json/js/json2.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/framework/core/js/Fluid.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/framework/core/js/DataBinding.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/framework/core/js/FluidIoC.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/framework/core/js/FluidDocument.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/framework/core/js/FluidView.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/framework/enhancement/js/ProgressiveEnhancement.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/Fluid.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/DataBinding.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidIoC.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidDocument.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/core/js/FluidView.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/framework/enhancement/js/ProgressiveEnhancement.js"></script>
<!-- Uploader dependencies -->
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/components/uploader/js/Uploader.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/components/uploader/js/FileQueue.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/components/progress/js/Progress.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/components/uploader/js/FileQueueView.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/components/uploader/js/FlashUploaderSupport.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/components/uploader/js/Flash9UploaderSupport.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/components/uploader/js/HTML5UploaderSupport.js"></script>
- <script type="text/javascript" src="[INFUSION_PATH]/src/webapp/components/uploader/js/DemoUploadManager.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/components/uploader/js/Uploader.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/components/uploader/js/FileQueue.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/components/progress/js/Progress.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/components/uploader/js/FileQueueView.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/components/uploader/js/FlashUploaderSupport.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/components/uploader/js/Flash9UploaderSupport.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/components/uploader/js/HTML5UploaderSupport.js"></script>
+ <script type="text/javascript" src="../infusion/src/webapp/components/uploader/js/DemoUploadManager.js"></script>
<!-- The Uploader demo -->
<script type="text/javascript" src="js/uploader.js"></script>
@@ -50,29 +50,6 @@
<input class="fl-uploader-basic-save" type="submit" value="Save"/>
</form>
- <div id="multi-file-uploader-settings" class="hide-me">
- <fieldset>
- <legend>Settings for Multi-file Uploader</legend>
- <table class="settings-table no-border">
- <tr>
- <td class="no-border"><label for="file-size-limit">File Size Limit:</label></td>
- <td class="no-border"><input id="file-size-limit" type="text" /> in KB</td>
- </tr>
- <tr>
- <td class="no-border"><label for="file-queue-limit">File Queue Limit:</label></td>
- <td class="no-border"><input id="file-queue-limit" type="text" /></td>
- </tr>
- <tr>
- <td class="no-border"><label for="allowed-file-type">Allowed File Types:</label></td>
- <td class="no-border"><input id="allowed-file-type" name="allowed-file-type" type="text" /></td>
- </tr>
- <tr>
- <td class="no-border" colspan="2">(Separate each file type with semi-colon. Example: *.gif;*.jpeg;)</td>
- </tr>
- </table>
- </fieldset>
- </div>
-
<div id="multi-file-uploader">
<!-- The Uploader's template will be injected via AJAX into this container. -->
</div>
@@ -89,13 +66,32 @@
</div>
<div id="demo-notes">
- 1. Your session will stay active for an hour. After one hour, all the uploaded images will be erased from the server.<br />
- 2. Allowed uploaded file types (case insensitive): jpg, png, gif, tif
+ Your session will stay active for an hour. After one hour, all the uploaded images will be erased from the server.<br />
</div>
-
+
+ <div id="multi-file-uploader-settings" class="hide-me">
+ <fieldset>
+ <legend>Uploader Settings</legend>
+ <table class="settings-table no-border">
+ <tr>
+ <td class="no-border"><label for="file-size-limit">File Size Limit:</label></td>
+ <td class="no-border"><input id="file-size-limit" type="text" /> in KB</td>
+ </tr>
+ <tr>
+ <td class="no-border"><label for="file-queue-limit">File Queue Limit:</label></td>
+ <td class="no-border"><input id="file-queue-limit" type="text" /></td>
+ </tr>
+ <tr>
+ <td class="no-border"><label for="allowed-file-type">Allowed File MIME Types:</label></td>
+ <td class="no-border"><input id="allowed-file-type" name="allowed-file-type" type="text" /></td>
+ </tr>
+ </table>
+ </fieldset>
+ </div>
+
<script type="text/javascript">
- demo.initUploader();
+ demo.imageGallery("body");
</script>
</body>
-</html>
+</html>
View
12 uploader.php
@@ -1,4 +1,16 @@
<?php
+
+/*
+Copyright 2011 OCAD University
+
+Licensed under the Educational Community License (ECL), Version 2.0 or the New
+BSD license. You may not use this file except in compliance with one these
+Licenses.
+
+You may obtain a copy of the ECL 2.0 License and BSD License at
+https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
+*/
+
define('FLUID_IG_INCLUDE_PATH', 'include/');
include("include/vitals.inc.php");

0 comments on commit 0752e46

Please sign in to comment.
Something went wrong with that request. Please try again.