Further work on multi-file-upload

apps/files/static/files/upload.js

@@ -1,9 +1,40 @@
 $(function () {
-  /* 2. INITIALIZE THE FILE UPLOAD COMPONENT */
-  $("input[type=file]").fileupload({
-    dataType: 'json',
-    done: function (e, data) {  /* 3. PROCESS THE RESPONSE FROM THE SERVER */
-      console.log(data);
-    }
-  });
+    // un-set "name" attributes to avoid submitting to server
+    $(".fileupload").removeAttr('name');
+    // set up all file inputs for jQuery-fileUpload
+    $(".fileupload").fileupload({
+        dataType: 'json',
+        paramName: 'file',
+        done: function (e, data) {  
+            // process server response
+            if (data.result.is_valid) {
+                var $field = $('#id_' + $(this).attr('data-field')),
+                    $ul = $(this).siblings('ul'),
+                    $li = $("<li>"),
+                    $remove = $('<a title="remove"></a>'),
+                    ids = $field.val().split(",").filter(function (v) {
+                        return v != '';
+                    });
+
+                ids.push(data.result.id);
+                
+                if (!$ul.length) {
+                    $ul = $("<ul>").insertAfter(this);
+                }
+
+                $li.text(data.result.name);
+
+                // FIXME AJAXify
+                //$remove.attr('href', '/files/' + data.result.id + '/delete/');
+                //$remove.append($('<i class="glyphicon glyphicon-remove"/>'));
+                //$li.append($remove);
+
+                $ul.append($li);
+
+                $field.val(ids.toString());
+
+                document.getElementById('case-study-form').dispatchEvent(new Event('dirty'))
+            }
+        }
+    });
 });