Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Comparing changes

Choose two branches to see what's changed or to start a new pull request. If you need to, you can also compare across forks.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also compare across forks.
base fork: jobara/image-gallery
base: master
...
head fork: fluid-project/image-gallery
compare: master
Checking mergeability… Don't worry, you can still create the pull request.
  • 13 commits
  • 8 files changed
  • 0 commit comments
  • 5 contributors
Commits on May 30, 2011
Cindy Li NOJIRA: A couple of improvements at install.sh to read the name of th…
…e temp dir from ini file and check its existence before the creation.
9029c24
Commits on Jun 02, 2011
Cindy Li FLUID-4274: implemented Jonathan's UI design. Also fixed a bunch of f…
…ile permissions from 755 to 644.
580ebe2
Jonathan Hung FLUID-4274: Modified the presentation of the error message. d6bb966
Jonathan Hung FLUID-4274: Fixed styling for Demo Settings controls. a97209f
Cindy Li FLUID-4274: clear the error message div at each new upload. bc82c6f
Jonathan Hung FLUID-4274: Added some tweaks to width of gallery container. 9755cd3
Cindy Li Merge remote branch 'jhung/master' 51cc165
Commits on Jun 17, 2011
@colinbdclark colinbdclark FLUID-3878: Linked new ErrorsView file, fixed stray commas and other …
…Lint/IE6 problems.
3a3340d
Commits on Jun 27, 2011
@colinbdclark colinbdclark FLUID-3878: Updating the Image Gallery to link to the renamed ErrorPa…
…nel.js file in Uploader.
04a9193
Commits on Sep 20, 2011
Cindy Qi Li FLUID-4445: Boiled uploader events into image gallery only with multi…
…FileUploader as these events are not available at singleFileUploader.
beeab5e
Commits on Sep 22, 2011
@colinbdclark colinbdclark Merge branch 'master', remote-tracking branch 'cindyli/FLUID-4445'
* cindyli/FLUID-4445:
  FLUID-4445: Boiled uploader events into image gallery only with multiFileUploader as these events are not available at singleFileUploader.

* master:
8bc4cb2
Commits on Sep 23, 2011
@colinbdclark colinbdclark FLUID-4445: Updates Image Gallery's JS to match coding standards. ff1a6ef
Commits on Jul 11, 2013
@amb26 amb26 FLUID-4919: Updated image gallery for updates in Infusion trunk due t…
…o FLUID-4919: Also improved documentation and PHP error handling of upload failures
97e23ce
View
3  README 100755 → 100644
@@ -14,6 +14,9 @@ How to install:
dos2unix install.sh -- (Windows only) convert the installation script in DOS/MAC format to UNIX format
./install.sh -- install.sh asks for the path to your local infusion library
+5. Edit your php.ini file to increase the default maximum uploaded file size (upload_max_filesize) to a suitable value (the default
+ client-side maximum enforced in the image gallery is 20MB) - http://php.net/upload-max-filesize
+
6. That's all. The Image Gallery is running at: http://localhost/image-gallery/image-gallery.php
How it looks:
View
62 css/image-gallery.css 100755 → 100644
@@ -1,52 +1,44 @@
-.ig-uploaders {
- margin-left: 2em;
- margin-top: 5em;
- margin-bottom: 5em;
- width: 40%;
- float: left;
-}
+.igStyle-imageGallery {
+ width: 440px;
+ margin-left: auto;
+ margin-right: auto;
+ }
-.ig-imageViewer {
- margin-right: 2em;
- margin-top: 2em;
- width: 50%;
- float: right;
+.igStyle-imageViewer {
border: solid thin;
- padding: 20px;
- min-height: 55em;
+ min-height: 180px;
+ padding-left: 1em;
+ overflow: auto;
}
-.ig-notes {
- margin-left: 1em;
- clear: left;
- width: 40%;
- font-size: medium;
+.igStyle-serverErrors {
+ border: 5px #aaffaa solid;
+ margin-top: 10px;
+ padding: 4px;
}
-.ig-serverErrors {
- margin-left: 1em;
- margin-bottom: 1em;
- clear: left;
- width: 40%;
- font-size: medium;
- font-weight: bold;
- color: #FF0000;
+.igStyle-serverErrors .igStyle-errorTitle {
+ font-weight:bold;
+ display:block;
}
-.ig-imageFrame {
+.igStyle-imageFrame {
float: left;
margin: 0.5em;
- height: 150px;
+ max-width: 100px;
+ max-height: 75px;
}
-.settingsTable {
- border-spacing: 1px
+.igStyle-fileTypes {
+ display:block;
+ margin-left:20px;
}
-.noBorder {
- border:0 none;
+.ig-settings-field {
+ margin-bottom:10px;
+ margin-left:1em;
}
-fieldset {
- border: 1px solid #000000;
+.ig-settings #fileTypes{
+ margin-left: 20px;
}
View
10 image-gallery-settings.ini
@@ -1,12 +1,12 @@
[client]
-infusion = "../infusion"
+infusion = "../infusion-master"
[server]
allowed_file_extensions[] = "gif"
allowed_file_extensions[] = "png"
allowed_file_extensions[] = "jpg"
-allowed_file_extensions[] = "jpeg
-allowed_file_extensions[] = "tif
+allowed_file_extensions[] = "jpeg"
+allowed_file_extensions[] = "tif"
allowed_file_extensions[] = "tiff"
-secs_to_timeout = 3600;
-temp_dir = 'temp/';
+secs_to_timeout = 3600
+temp_dir = "temp/"
View
76 image-gallery.php 100755 → 100644
@@ -41,6 +41,7 @@
<script type="text/javascript" src="<?php echo FLUID_IG_INFUSION;?>/src/webapp/components/uploader/js/FileQueue.js"></script>
<script type="text/javascript" src="<?php echo FLUID_IG_INFUSION;?>/src/webapp/components/progress/js/Progress.js"></script>
<script type="text/javascript" src="<?php echo FLUID_IG_INFUSION;?>/src/webapp/components/uploader/js/FileQueueView.js"></script>
+ <script type="text/javascript" src="<?php echo FLUID_IG_INFUSION;?>/src/webapp/components/uploader/js/ErrorPanel.js"></script>
<script type="text/javascript" src="<?php echo FLUID_IG_INFUSION;?>/src/webapp/components/uploader/js/MimeTypeExtensions.js"></script>
<script type="text/javascript" src="<?php echo FLUID_IG_INFUSION;?>/src/webapp/components/uploader/js/FlashUploaderSupport.js"></script>
<script type="text/javascript" src="<?php echo FLUID_IG_INFUSION;?>/src/webapp/components/uploader/js/Flash9UploaderSupport.js"></script>
@@ -51,10 +52,11 @@
<script type="text/javascript" src="js/image-gallery.js"></script>
</head>
<body>
- <div class="ig-imageGallery">
+ <div class="ig-imageGallery igStyle-imageGallery">
+ <h1>Image Gallery Uploader Demo</h1>
<!-- Basic upload controls, used when JavaScript is unavailable -->
- <div class="ig-uploaders">
- <form action="uploader.php" method="post" enctype="multipart/form-data" class="fl-progEnhance-basic">
+ <div class="igStyle-uploaders">
+ <form action="uploader-server.php" method="post" enctype="multipart/form-data" class="fl-progEnhance-basic">
<div>
<input type="hidden" name="isSingleUploader" value="1" />
<p>Use the Browse button to add a file, and the Save button to upload it.</p>
@@ -68,44 +70,50 @@
</div>
</div>
- <div class="ig-imageViewer">
- <!-- The container to display all the uploaded images. -->
+ <div>
<h2>Uploaded images:</h2>
- <div class="ig-imageViewer-images"></div>
+ <div class="igStyle-imageViewer">
+ <!-- The container to display all the uploaded images. -->
+ <div class="ig-imageViewer-images igStyle-imageViewer-images"></div>
+ </div>
</div>
-
+
<div class="ig-serverErrors">
<!-- The returned server error message will be displayed in this container. -->
</div>
- <div class="ig-notes">
- <p>
- Notes:
- <ul>
- <li>Your session will stay active for an hour. After one hour, all the uploaded images will be erased from the server.</li>
- <li>To test with specific file types, set the fileTypes option to a comma-delimited list of MIME types.</li>
- <li>Reconfiguring the Uploader in IE 7-8 is known to cause periodic explosions.</li>
- </ul>
- </div>
-
<div class="ig-settings fl-hidden">
- <fieldset>
- <legend>Uploader Settings</legend>
- <table class="settingsTable noBorder">
- <tr>
- <td class="noBorder"><label for="fileSizeLimit">File Size Limit:</label></td>
- <td class="noBorder"><input id="fileSizeLimit" type="text" /> in KB</td>
- </tr>
- <tr>
- <td class="noBorder"><label for="fileUploadLimit">File Queue Limit:</label></td>
- <td class="noBorder"><input id="fileUploadLimit" type="text" /></td>
- </tr>
- <tr>
- <td class="noBorder"><label for="fileTypes">Allowed File MIME Types:</label></td>
- <td class="noBorder"><input id="fileTypes" name="allowedFileType" type="text" /></td>
- </tr>
- </table>
- </fieldset>
+ <h2>Demo settings</h2>
+ <div class="ig-settings-field">
+ <label for="fileSizeLimit">File size limit:</label>
+ <select id="fileSizeLimit">
+ </select> MB
+ </div>
+
+ <div class="ig-settings-field">
+ <label for="fileUploadLimit">Upload queue limit:</label>
+ <select id="fileUploadLimit">
+ </select>
+ </div>
+
+ <div class="ig-settings-field">
+ <span>Allowed image types:</span>
+ <fieldset>
+ <span class="igStyle-fileTypes fileTypes-row">
+ <input class="fileTypes-choice" id="fileTypes-choice" type="checkbox" />
+ <label class="fileTypes-label" for="fileTypes-choice">choice</label>
+ </span>
+ </fieldset>
+ </div>
+ </div>
+
+ <div>
+ <h2>Demo notes:</h2>
+ <ul>
+ <li>The session will stay active for one hour. After one hour, any uploaded images will be erased from the server.</li>
+ <li>Changing demo settings in IE 7 and IE 8 is known to cause periodic errors.</li>
+ <li>Demo setting "Allowed image types" is only supported by IE, not other browsers.</li>
+ </ul>
</div>
</div>
View
0  include/vitals.inc.php 100755 → 100644
File mode changed
View
15 install.sh
@@ -1,5 +1,16 @@
# Create the temp directory that is the home of the uploaded images
-mkdir temp
-chmod 777 temp
+
+iniFile="image-gallery-settings.ini"
+
+tempDir=`grep "^temp_dir =" $iniFile | cut -d= -f2 | sed 's/"\(.*\)\/"/\1/'`
+
+if [ ! -d $tempDir ]
+then
+ mkdir $tempDir
+ chmod 777 $tempDir
+ echo "Directory \""$tempDir"\" is Created!"
+fi
+
+echo "Installed successfully!"
exit
View
157 js/image-gallery.js
@@ -1,6 +1,6 @@
/*
-Copyright 2011 OCAD University
+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.
@@ -10,7 +10,7 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
*/
// Declare dependencies
-/*global fluid_1_4:true, jQuery*/
+/*global fluid, 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 */
@@ -18,6 +18,8 @@ https://github.com/fluid-project/infusion/raw/master/Infusion-LICENSE.txt
var demo = demo || {};
(function ($, fluid) {
+ fluid.setLogging(fluid.logLevel.TRACE);
+ fluid.setDemandLogging(true);
/**
* ImageGallery represents the client-side behaviour for the Uploader Image Gallery demo.
@@ -48,7 +50,7 @@ var demo = demo || {};
}
},
- uploader: {
+ imageUploader: {
type: "fluid.uploader",
createOnEvent: "onReady",
container: "{imageGallery}.dom.uploader",
@@ -65,34 +67,9 @@ var demo = demo || {};
},
queueSettings: {
uploadURL: "{imageGallery}.uploadURL",
- fileTypes: ["image/gif", "image/jpeg", "image/png", "image/tiff"],
+ fileTypes: ["image/bmp", "image/gif", "image/jpeg", "image/png", "image/tiff"],
fileSizeLimit: "20480",
fileUploadLimit: 0
- },
- // Boil Uploader's onFileSuccess and onFileError to match our component's semantics.
- events: {
- onSuccess: {
- event: "onFileSuccess",
- args: [
- {
- fileName: "{arguments}.0.name",
- srcURL: "{arguments}.1"
- }
- ]
- },
- onError: {
- event: "onFileError",
- args: [
- {
- fileName: "{arguments}.0.name",
- statusCode: "{arguments}.2"
- }
- ]
- }
- },
- listeners: {
- onSuccess: "{imagesView}.render",
- onError: "{errorsView}.render"
}
}
},
@@ -101,7 +78,7 @@ var demo = demo || {};
type: "demo.imageGallery.simpleRenderer",
container: "{imageGallery}.dom.images",
options: {
- template: "<img src='%srcURL' alt='%fileName' class='ig-imageFrame' />"
+ template: "<img src='%srcURL' alt='%fileName' class='igStyle-imageFrame' />"
}
},
@@ -109,7 +86,7 @@ var demo = demo || {};
type: "demo.imageGallery.simpleRenderer",
container: "{imageGallery}.dom.errors",
options: {
- template: "<div>%fileName failed to upload. HTTP status code: %statusCode</div>"
+ template: "<div class='igStyle-serverErrors'><span class='igStyle-errorTitle'>HTTP status code: %statusCode</span><span>%fileName failed to upload.</span> </div>"
}
},
@@ -117,7 +94,7 @@ var demo = demo || {};
type: "demo.imageGallery.settings",
createOnEvent: "onReady",
options: {
- model: "{imageGallery}.options.components.uploader.options.queueSettings",
+ model: "{imageGallery}.options.components.imageUploader.options.queueSettings",
listeners: {
modelChanged: "{imageGallery}.resetUploader"
}
@@ -156,7 +133,7 @@ var demo = demo || {};
that.destroyUploader = function () {
that.locate("uploader").empty();
if (fluid.get(that, "uploader.strategy.engine")) {
- var su = that.uploader.strategy.engine.swfUpload;
+ var su = that.imageUploader.strategy.engine.swfUpload;
su.destroy();
}
};
@@ -195,6 +172,10 @@ var demo = demo || {};
var renderedMarkup = fluid.stringTemplate(that.options.template, values);
that.container.append(renderedMarkup);
};
+
+ that.clear = function () {
+ that.container.html("");
+ };
};
@@ -207,12 +188,49 @@ var demo = demo || {};
selectors: {
fileSizeLimit: "#fileSizeLimit",
fileUploadLimit: "#fileUploadLimit",
- fileTypes: "#fileTypes"
+ "fileTypesRowID:": ".fileTypes-row",
+ fileTypesInputID: ".fileTypes-choice",
+ fileTypesLabelID: ".fileTypes-label"
+ },
+ model: {
+ labelMap: {
+ fileSizeLimit: {
+ labels: ["1", "5", "10", "15", "20"],
+ values: ["1024", "5120", "10240", "15360", "20480"]
+ },
+ fileUploadLimit: {
+ labels: ["No Limit", "5", "10", "15", "20"],
+ values: ["0", "5", "10", "15", "20"]
+ },
+ fileTypes: {
+ labels: ["BMP", "GIF", "JPG, JPEG, JPE, JFIF", "PNG", "TIF, TIFF"],
+ values: ["image/bmp", "image/gif", "image/jpeg", "image/png", "image/tiff"]
+ }
+ }
},
protoTree: {
- fileSizeLimit: "${fileSizeLimit}",
- fileUploadLimit: "${fileUploadLimit}",
- fileTypes: "${fileTypes}"
+ fileSizeLimit: {
+ optionnames: "${labelMap.fileSizeLimit.labels}",
+ optionlist: "${labelMap.fileSizeLimit.values}",
+ selection: "${fileSizeLimit}"
+ },
+ fileUploadLimit: {
+ optionnames: "${labelMap.fileUploadLimit.labels}",
+ optionlist: "${labelMap.fileUploadLimit.values}",
+ selection: "${fileUploadLimit}"
+ },
+ expander: {
+ type: "fluid.renderer.selection.inputs",
+ inputID: "fileTypesInputID",
+ tree: {
+ optionnames: "${labelMap.fileTypes.labels}",
+ optionlist: "${labelMap.fileTypes.values}",
+ selection: "${fileTypes}"
+ },
+ rowID: "fileTypesRowID",
+ selectID: "fileTypes",
+ labelID: "fileTypesLabelID"
+ }
},
events: {
modelChanged: null
@@ -223,15 +241,6 @@ var demo = demo || {};
});
demo.imageGallery.settings.init = function (that) {
- // TODO: Replace these with model transformation.
- that.events.prepareModelForRender.addListener(function (model) {
- model.fileTypes = fluid.isArrayable(model.fileTypes) ?
- model.fileTypes.join(",") : model.fileTypes;
- });
- that.applier.modelChanged.addListener("*", function (model) {
- model.fileTypes = model.fileTypes ? model.fileTypes.split(",") : undefined;
- });
-
// TODO: Replace this with a declarative listener when the framework supports it.
that.applier.modelChanged.addListener("*", function (model) {
that.events.modelChanged.fire(model);
@@ -241,13 +250,63 @@ var demo = demo || {};
that.container.removeClass(that.options.styles.hidden);
};
- fluid.demands("demo.imageGallery.settings", ["demo.imageGallery", "fluid.uploader.multiFileUploader"], {
+ /** Note: As originally written, this used to match on "fluid.uploader.multiFileUploader" which is now no longer
+ * visible from the uploader. In the future, we may be able to restore this after, say, FLUID-4982 */
+ fluid.demands("demo.imageGallery.settings", ["demo.imageGallery"], {
funcName: "demo.imageGallery.settings",
container: "{imageGallery}.dom.settings"
});
- fluid.demands("demo.imageGallery.settings", ["demo.imageGallery", "fluid.uploader.singleFileUploader"], {
- funcName: "fluid.emptySubcomponent"
+ fluid.demands("demo.imageGallery.settings", ["demo.imageGallery", "fluid.uploader.singleFile"], {
+ funcName: "fluid.emptySubcomponent",
+ container: null
+ });
+
+ // Boil Uploader's onFileSuccess and onFileError to match our component's semantics.
+ var eventOpts = {
+ events: {
+ onSuccess: {
+ event: "onFileSuccess",
+ args: [
+ {
+ fileName: "{arguments}.0.name",
+ srcURL: "{arguments}.1"
+ }
+ ]
+ },
+ onError: {
+ event: "onFileError",
+ args: [
+ {
+ fileName: "{arguments}.0.name",
+ statusCode: "{arguments}.2"
+ }
+ ]
+ }
+ },
+ listeners: {
+ onSuccess: "{imagesView}.render",
+ onError: "{errorsView}.render",
+ onUploadStart: "{errorsView}.clear"
+ }
+ };
+
+ // Bind event options only with multiFileUplaoder, not singleFileUploader, since the boiled
+ // events are only available at multiFileUploader.
+
+ // Note that the demands context uses underlying components rather than the direct use of
+ // fluid.uploader.multiFileUploader because "imageUploader" is an instance of "fluid.uploader"
+ // that the matching on multiFileUploader is too late to pick up the desired options.
+ fluid.demands("imageUploader", ["demo.imageGallery", "fluid.uploader.html5"], {
+ options: eventOpts
+ });
+
+ fluid.demands("imageUploader", ["demo.imageGallery", "fluid.uploader.swfUpload"], {
+ options: eventOpts
+ });
+
+ fluid.demands("imageUploader", ["demo.imageGallery", "fluid.uploader.singleFile"], {
+ options: "{options}"
});
})(jQuery, fluid);
View
13 uploader-server.php 100755 → 100644
@@ -35,7 +35,8 @@
// 2. whether session id is provided;
// 3. whether the file extension is allowed;
// 4. whether $temp_dir exists;
-// 5. whether the file has been uploaded.
+// 5. whether PHP reports an error in the upload (perhaps due to upload_max_filesize in PHP.ini)
+// 6. whether the file has already been uploaded.
// 1. Return error if there is no file received
if (count($_FILES) == 0) {
@@ -71,10 +72,16 @@
return_error('Cannot create image folder <span style="font: bold">'.$image_folder.'</span>.', $return_err_in_html);
exit;
}
+ // 5. Return error if the file uploaded with error
+ if ($file_data['error']) {
+ return_error('PHP Error when uploading file: code '.$file_data['error'].': consult http://php.net/manual/en/features.file-upload.errors.php for details', $return_err_in_html);
+ exit;
+ }
+
// END OF error checking
$destination = $image_folder.$file_name;
- // 5. Return error if the file has been uploaded
+ // 6. Return error if the file has already been uploaded
if (file_exists($destination)) {
return_error($file_name.' has already been uploaded.', $return_err_in_html);
exit;
@@ -85,7 +92,7 @@
if (isset($_REQUEST['isSingleUploader']) && $_REQUEST['isSingleUploader']) {
// At single file uploader, display the uploaded image right after upload
- echo '<a href="'.FLUID_IG_BASE_HREF.'uploader.html">Back to image gallery demo</a><br/><br/>';
+ echo '<a href="'.FLUID_IG_BASE_HREF.'image-gallery.php">Back to image gallery demo</a><br/><br/>';
echo '<img src="'.htmlentities(FLUID_IG_BASE_HREF.$destination).'" alt="'.$file_name.'" />';
} else {
// At multi-file uploader, return the url to the uploaded image

No commit comments for this range

Something went wrong with that request. Please try again.