Permalink
Browse files

This commit handles single file uploader, also includes a new install…

…ation shell script for the deployment of this uploader demo.
  • Loading branch information...
1 parent 10955b6 commit 391151e50963beeb3d9bac94b95c91a9a658ee9c Cindy Li committed Mar 23, 2011
Showing with 214 additions and 46 deletions.
  1. +5 −11 README
  2. +1 −1 css/styles.css
  3. +11 −1 include/vitals.inc.php
  4. +18 −0 install.sh
  5. +3 −3 js/uploader.js
  6. +47 −0 js/uploader_new.js
  7. +32 −23 uploader.html
  8. +21 −7 uploader.php
  9. +76 −0 uploader_new.html
View
16 README
@@ -1,20 +1,14 @@
How to install:
-1. First of all, make sure PHP web server and git are installed. Moreover, infusion source code is pulled out locally.
+1. First of all, make sure you have PHP, Apache (or other web servers) and git installed. Moreover, infusion library is pulled out locally.
-2. Retrieve image gallery demo into :
+2. Retrieve image gallery demo and install:
cd [webserver_document_root] -- or any folder underneath your web server document root
git clone git://github.com/cindyli/image-gallery.git
-
-3. Create an empty folder "temp" underneath "image-gallery" and grant it 777 permissoin. This is where all the uploaded images will reside.
cd image-gallery
- mkdir temp
- chmod 777 temp
-
-4. Modified the path in the listed scripts pointing to your infusion source code.
- uploader.html - line 7 - 34
- js/uploader.js - line 12, 21, 22
+
+ ./install.sh -- Note that install.sh asks for the input of the path to infusion library
-5. That's all. Now access via (just an example): http://localhost/image-gallery/uploader.html
+3. That's all. Now access via (just an example): http://localhost/image-gallery/uploader.html
How it looks like:
This image gallery uploader demo is composed by 2 parts: the multi-file uploader at left and an image viewer at right.
View
2 css/styles.css
@@ -1,4 +1,4 @@
-#uploader-contents {
+#uploader-contents, #single-file-uploader {
margin-left: 2em;
margin-top: 5em;
margin-bottom: 5em;
View
12 include/vitals.inc.php
@@ -147,11 +147,21 @@ function get_unique_name($file_name, $directory){
* Return error msg with http status code 400
* @access public
* @param string err_string the error message
+ * integer return_err_in_html 1/0. Return error message in a complete html
*/
-function return_error($err_string) {
+function return_error($err_string, $return_err_in_html) {
header("HTTP/1.0 400 Bad Request");
header("Status: 400");
+
+ if ($return_err_in_html) {
+ echo '<html><p>';
+ }
+
echo $err_string;
+
+ if ($return_err_in_html) {
+ echo '</p></html>';
+ }
}
/**
View
18 install.sh
@@ -0,0 +1,18 @@
+# Runs the Image Gallery deployment steps
+
+# Prompt the user for the right path to infusion library
+echo -n "Please enter the path to infusion (for example, ../infusion): "
+read infusion_path
+
+# Remove the ending slash in the given path if it has one
+infusion_path=`echo "${infusion_path}" | sed -e "s/\/*$//" `
+
+# Create the temp directory that is the home of the uploaded images
+mkdir temp
+chmod 777 temp
+
+# Set the correct infusion path
+sed "s#\[INFUSION_PATH\]#"$infusion_path"#g" uploader.html > uploader.html
+sed "s#\[INFUSION_PATH\]#"$infusion_path"#g" js/uploader.js > js/uploader.js
+
+exit
View
6 js/uploader.js
@@ -9,7 +9,7 @@ var demo = demo || {};
var sessionID = Math.random().toString(16).substring(2);
// Load the Uploader's template via AJAX and inject it into this page.
- var templateURLSelector = "../infusion-mlam/src/webapp/components/uploader/html/Uploader.html .fl-uploader";
+ var templateURLSelector = "[INFUSION_PATH]/src/webapp/components/uploader/html/Uploader.html .fl-uploader";
$("#uploader-contents").load(templateURLSelector, null, function () {
// Initialize the Uploader
@@ -18,8 +18,8 @@ var demo = demo || {};
strategy: {
options: {
flashMovieSettings: {
- flashURL: "../infusion-mlam/src/webapp/lib/swfupload/flash/swfupload.swf",
- flashButtonImageURL: "../infusion-mlam/src/webapp/components/uploader/images/browse.png"
+ flashURL: "[INFUSION_PATH]/src/webapp/lib/swfupload/flash/swfupload.swf",
+ flashButtonImageURL: "[INFUSION_PATH]/src/webapp/components/uploader/images/browse.png"
}
}
}
View
47 js/uploader_new.js
@@ -0,0 +1,47 @@
+/*global jQuery*/
+/*global fluid*/
+/*global demo*/
+
+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 = "aa/src/webapp/components/uploader/html/Uploader.html .fl-uploader";
+ $("#uploader-contents").load(templateURLSelector, null, function () {
+
+ // Initialize the Uploader
+ fluid.uploader(".flc-uploader", {
+ components: {
+ strategy: {
+ options: {
+ flashMovieSettings: {
+ flashURL: "aa/src/webapp/lib/swfupload/flash/swfupload.swf",
+ flashButtonImageURL: "aa/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: "*.gif;*.jpeg;*.jpg;*.png;*.tiff;*.tif"
+ },
+ 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 + " - " + xhr.responseText + "<br />");
+ }
+ }
+ });
+ });
+ };
+})(jQuery, fluid);
+
+
+
View
55 uploader.html
@@ -4,34 +4,34 @@
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Uploader</title>
- <link rel="stylesheet" type="text/css" href="../infusion-mlam/src/webapp/framework/fss/css/fss-reset.css" />
- <link rel="stylesheet" type="text/css" href="../infusion-mlam/src/webapp/framework/fss/css/fss-layout.css" />
- <link rel="stylesheet" type="text/css" href="../infusion-mlam/src/webapp/components/uploader/css/Uploader.css" />
+ <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" />
<!-- Fluid and jQuery Dependencies -->
- <script type="text/javascript" src="../infusion-mlam/src/webapp/lib/jquery/core/js/jquery.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/lib/jquery/ui/js/jquery.ui.core.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/framework/core/js/jquery.keyboard-a11y.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/lib/jquery/plugins/scrollTo/js/jquery.scrollTo.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/lib/swfobject/js/swfobject.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/lib/swfupload/js/swfupload.js"></script>
+ <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-mlam/src/webapp/framework/core/js/Fluid.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/framework/core/js/DataBinding.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/framework/core/js/FluidIoC.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/framework/core/js/FluidDocument.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/framework/core/js/FluidView.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/framework/enhancement/js/ProgressiveEnhancement.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>
<!-- Uploader dependencies -->
- <script type="text/javascript" src="../infusion-mlam/src/webapp/components/uploader/js/Uploader.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/components/uploader/js/FileQueue.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/components/progress/js/Progress.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/components/uploader/js/FileQueueView.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/components/uploader/js/FlashUploaderSupport.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/components/uploader/js/Flash9UploaderSupport.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/components/uploader/js/HTML5UploaderSupport.js"></script>
- <script type="text/javascript" src="../infusion-mlam/src/webapp/components/uploader/js/DemoUploadManager.js"></script>
+ <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>
<!-- The Uploader demo -->
<link rel="stylesheet" type="text/css" href="css/styles.css" />
@@ -40,6 +40,15 @@
</head>
<body>
+ <!-- Basic upload controls, used when JavaScript is unavailable -->
+ <form action="uploader.php" method="post" enctype="multipart/form-data" class="fl-progEnhance-basic" id="single-file-uploader">
+ <input type="hidden" name="isSingleUploader" value="1">
+
+ <p>Use the Browse button to add a file, and the Save button to upload it.</p>
+ <input name="fileData" type="file" />
+ <input class="fl-uploader-basic-save" type="submit" value="Save"/>
+ </form>
+
<div id="uploader-contents">
<!-- The Uploader's template will be injected via AJAX into this container. -->
</div>
View
28 uploader.php
@@ -8,9 +8,16 @@
$secs_to_timeout = 3600; // The seconds to keep the uploaded images
$temp_dir = 'temp/';
-// Removed all the folders that are older than 60 mins
+// Removed all the folders that are older than 3600 seconds
clean_history($temp_dir, $secs_to_timeout);
+if (isset($_REQUEST['isSingleUploader']) && $_REQUEST['isSingleUploader']) {
+ $_REQUEST['session'] = 'single';
+ $return_err_in_html = 1;
+} else {
+ $return_err_in_html = 0;
+}
+
// Error checkings:
// 1. wether the file is received;
// 2. wether session id is provided;
@@ -19,13 +26,13 @@
// 1. Return error if there is no file received
if (count($_FILES) == 0) {
- return_error("No file is received at server.");
+ return_error("No file is received at server.", $return_err_in_html);
exit;
}
// 2. Return error if the session id is not given
if (!isset($_REQUEST['session']) || strlen($_REQUEST['session']) == 0) {
- return_error("Session ID is not provided.");
+ return_error("Session ID is not provided.", $return_err_in_html);
exit;
}
@@ -35,20 +42,20 @@
$file_extension = strtolower(substr($file_name, strrpos($file_name, '.') + 1));
if (!in_array($file_extension, $allowed_file_extensions)) {
- return_error('File extension <span style="font: bold">'.$file_extension.'</span> is not allowed.');
+ return_error('File extension <span style="font: bold">'.$file_extension.'</span> is not allowed.', $return_err_in_html);
exit;
}
// 4. Return error if $temp_dir does not exist
if (!file_exists($temp_dir)) {
- return_error('Temp folder <span style="font: bold">'.$temp_dir.'</span> does not exist.');
+ return_error('Temp folder <span style="font: bold">'.$temp_dir.'</span> does not exist.', $return_err_in_html);
exit;
}
// Find or even create the image folder for this round of upload
$image_folder = $temp_dir . $_REQUEST['session'].'/';
if (!file_exists($image_folder) && !mkdir($image_folder)) {
- return_error('Cannot create image folder <span style="font: bold">'.$image_folder.'</span>.');
+ return_error('Cannot create image folder <span style="font: bold">'.$image_folder.'</span>.', $return_err_in_html);
exit;
}
// END OF error checking
@@ -61,6 +68,13 @@
// Copy the uploaded file into the image folder
move_uploaded_file($file_data['tmp_name'], $destination);
- echo FLUID_IG_BASE_HREF.$destination;
+ 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 '<img src="'.htmlentities(FLUID_IG_BASE_HREF.$destination).'" alt="'.$file_name.'" />';
+ } else {
+ // At multi-file uploader, return the url to the uploaded image
+ echo FLUID_IG_BASE_HREF.$destination;
+ }
}
?>
View
76 uploader_new.html
@@ -0,0 +1,76 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
+ <head>
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
+ <title>Uploader</title>
+
+ <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" />
+
+ <!-- Fluid and jQuery Dependencies -->
+ <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/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/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 -->
+ <link rel="stylesheet" type="text/css" href="css/styles.css" />
+
+ <script type="text/javascript" src="js/uploader.js"></script>
+ </head>
+ <body>
+
+ <!-- Basic upload controls, used when JavaScript is unavailable -->
+ <form action="uploader.php" method="post" enctype="multipart/form-data" class="fl-progEnhance-basic" id="single-file-uploader">
+ <input type="hidden" name="isSingleUploader" value="1">
+
+ <p>Use the Browse button to add a file, and the Save button to upload it.</p>
+ <input name="fileData" type="file" />
+ <input class="fl-uploader-basic-save" type="submit" value="Save"/>
+ </form>
+
+ <div id="uploader-contents">
+ <!-- The Uploader's template will be injected via AJAX into this container. -->
+ </div>
+
+ <div id="image-viewer">
+ <!-- The container to display all the uploaded images. -->
+ <h2>Uploaded images:</h2>
+ <div id="image-space"></div>
+ </div>
+
+ <div id="server-error">
+ <!-- The returned server error message will be displayed in this container. -->
+ </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
+ </div>
+
+ <script type="text/javascript">
+ demo.initUploader();
+ </script>
+
+ </body>
+</html>

0 comments on commit 391151e

Please sign in to comment.