multiple file input fields in one form

sudr · sudr · commit 4602116774ff · 2011-02-13T21:19:43.000-06:00
diff --git a/WebContent/fileupload/jquery.fileupload-ui.css b/WebContent/fileupload/jquery.fileupload-ui.css
@@ -1,4 +1,4 @@
-.file_upload {
+div.file_upload {
   position: relative;
   overflow: hidden;
   direction: ltr;
@@ -16,7 +16,7 @@
   border: 1px solid limegreen;
 }
 
-.file_upload_small {
+div.file_upload_small {
   width: 200px;
   height: 30px;
   line-height: 30px;
@@ -25,7 +25,7 @@
   border: 1px solid limegreen;
 }
 
-.file_upload_large {
+div.file_upload_large {
   width: 100%;
   height: 150px;
   line-height: 150px;
@@ -34,11 +34,11 @@
   border: 1px solid limegreen;
 }
 
-.file_upload_highlight {
+div.file_upload_highlight {
   background: lawngreen;
 }
 
-.file_upload input {
+div.file_upload input {
   position: absolute;
   top: 0;
   right: 0;
diff --git a/WebContent/index.html b/WebContent/index.html
@@ -8,47 +8,58 @@
 </head>
 <body>
 <form id="file_upload" action="upload" method="POST" enctype="multipart/form-data">
-    <input type="file" name="file1" id="file1" multiple>
+    <div id="drop_zone_1">
+        <input id="file_1" type="file" name="file_1" multiple>
+        <div>Upload files</div>
+    </div>
+    <div id="drop_zone_2">
+        <input id="file_2" type="file" name="file_2" multiple>
+        <div>Upload files</div>
+    </div>
+    <div id="drop_zone_3">
+        <input id="file_3" type="file" name="file_3" multiple>
+        <div>Upload files</div>
+    </div>
     <button>Upload</button>
-    <div>Upload files</div>
     
-    <!-- This breaks the upload -->
-    <input type="file" name="file2" id="file2" multiple>
-    <button>Upload</button>
-    <div>Upload files</div>
-    <!-- -->
+    <table id="files_1" style="background:yellow;"></table>
+	<table id="files_2" style="background:gold;"></table>
+	<table id="files_3" style="background:orange;"></table>
 </form>
-<table id="file1_files"></table>
+
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
 <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
 <script src="fileupload/jquery.fileupload.js"></script>
 <script src="fileupload/jquery.fileupload-ui.js"></script>
 <script>
 
-$(document).ready(function() {
-	initUpload('file1');	
+/*global $ */
+$(function () {
+    var initFileUpload = function (suffix) {
+        $('#file_upload').fileUploadUI({
+            namespace: 'file_upload_' + suffix,
+            fileInputFilter: '#file_' + suffix,
+            dropZone: $('#drop_zone_' + suffix),
+            uploadTable: $('#files_' + suffix),
+            downloadTable: $('#files_' + suffix),
+            buildUploadRow: function (files, index) {
+                return $('<tr><td>' + files[index].name + '<\/td>' +
+                        '<td class="file_upload_progress"><div><\/div><\/td>' +
+                        '<td class="file_upload_cancel">' +
+                        '<button class="ui-state-default ui-corner-all" title="Cancel">' +
+                        '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
+                        '<\/button><\/td><\/tr>');
+            },
+            buildDownloadRow: function (file) {
+                return $('<tr><td>' + file.name + '<\/td><\/tr>');
+            }
+        });
+    };
+    initFileUpload(1);
+    initFileUpload(2);
+    initFileUpload(3);
 });
-
-function initUpload(uniqueId) {
-    $('#file_upload').fileUploadUI({
-    	namespace: uniqueId,
-    	fileInputFilter: '#' + uniqueId,
-        uploadTable: $('#'+ uniqueId + '_files'),
-        downloadTable: $('#'+ uniqueId + '_files'),
-        buildUploadRow: function (files, index) {
-            return $('<tr><td>' + files[index].name + '<\/td>' +
-                    '<td class="file_upload_progress"><div><\/div><\/td>' +
-                    '<td class="file_upload_cancel">' +
-                    '<button class="ui-state-default ui-corner-all" title="Cancel">' +
-                    '<span class="ui-icon ui-icon-cancel">Cancel<\/span>' +
-                    '<\/button><\/td><\/tr>');
-        },
-        buildDownloadRow: function (file) {
-            return $('<tr><td>' + file.name + '<\/td><\/tr>');
-        }
-    });
-}
 </script> 
 
 </body>
