Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Allow the manipulation of uploader options that are file size limit, …

…file queue limit and file types. The feature is not fully completed yet and still having some issues with IE and file size limit. More commits are followed.
  • Loading branch information...
commit 9d3b18338835253d0c01e8e05f2d39af11a584b3 1 parent d8e1540
Cindy Li authored
Showing with 96 additions and 35 deletions.
  1. +14 −1 css/styles.css
  2. +47 −24 js/uploader.js
  3. +35 −10 uploader.html
View
15 css/styles.css
@@ -1,4 +1,5 @@
-#uploader-contents, #single-file-uploader {
+/*#uploader-contents, #single-file-uploader {*/
+#uploader {
margin-left: 2em;
margin-top: 5em;
margin-bottom: 5em;
@@ -37,4 +38,16 @@
float: left;
margin: 0.5em;
height: 150px;
+}
+
+.settings-table {
+ border-spacing: 1px
+}
+
+.no-border {
+ border:0 none;
+}
+
+fieldset {
+ border: 1px solid #000000;
}
View
71 js/uploader.js
@@ -8,36 +8,59 @@ 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_PATH]/src/webapp/components/uploader/html/Uploader.html .fl-uploader";
- $("#uploader-contents").load(templateURLSelector, null, function () {
+ var templateURLSelector = "../infusion/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 () {
- // Initialize the Uploader
- fluid.uploader(".flc-uploader", {
- components: {
- strategy: {
- options: {
- flashMovieSettings: {
- flashURL: "[INFUSION_PATH]/src/webapp/lib/swfupload/flash/swfupload.swf",
- flashButtonImageURL: "[INFUSION_PATH]/src/webapp/components/uploader/images/browse.png"
+ // Initialize the Uploader
+ fluid.uploader(".flc-uploader", {
+ components: {
+ strategy: {
+ options: {
+ flashMovieSettings: {
+ flashURL: "[INFUSION_PATH]/src/webapp/lib/swfupload/flash/swfupload.swf",
+ flashButtonImageURL: "[INFUSION_PATH]/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 + " : Failed uploading. HTTP Status Code: " + status + "<br />");
+ queueSettings: {
+ // Set the uploadURL to the URL for posting files to your server.
+ uploadURL: "uploader.php?session=" + sessionID,
+ fileTypes: fileType,
+ fileSizeLimit: fileSize,
+ fileUploadLimit: fileUpload
+ },
+ 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 />");
+ }
}
- }
+ });
});
+ };
+
+ $("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);
+
+// alert("file type: "+ allowedFileType+"; file size: "+fileSizeLimit+"; file queue: "+ fileUploadLimit);
+ instantiateUploader(allowedFileType, fileSizeLimit, fileUploadLimit);
});
+
+ instantiateUploader(defaultAllowedFileType, defaultFileSizeLimit, defaultfileUploadLimit);
};
})(jQuery, fluid);
View
45 uploader.html
@@ -41,18 +41,43 @@
<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">
+ <div id="uploader">
+ <form action="uploader.php" method="post" enctype="multipart/form-data" class="fl-progEnhance-basic">
+ <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>
- <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>
+ <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 bytes</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>
+ </div>
+
<div id="image-viewer">
<!-- The container to display all the uploaded images. -->
<h2>Uploaded images:</h2>
Please sign in to comment.
Something went wrong with that request. Please try again.