Added support for multiple file upload

Also fixed the upload form so the button changed to "Uploading..." during an upload and clears the form on success

Author: ajbozarth

app.py

@@ -1,4 +1,4 @@
-import collections, logging, os, requests, signal, time
+import collections, json, logging, os, requests, signal, time
 from tornado import httpserver, ioloop, web
 
 
@@ -27,14 +27,17 @@ def delete(self):
 
 class UploadHandler(web.RequestHandler):
     def post(self):
-        file_des = self.request.files['file'][0]
-        file_name = temp_img_prefix + file_des['filename']
-        rel_path = static_img_path + file_name
-        output_file = open(rel_path, 'wb')
-        output_file.write(file_des['body'])
-        output_file.close()
-        caption = run_ml(rel_path)
-        self.finish({"file_name": rel_path, "caption": caption})
+        finish_ret = []
+        new_files = self.request.files['file']
+        for file_des in new_files:
+            file_name = temp_img_prefix + file_des['filename']
+            rel_path = static_img_path + file_name
+            output_file = open(rel_path, 'wb')
+            output_file.write(file_des['body'])
+            output_file.close()
+            caption = run_ml(rel_path)
+            finish_ret.append({"file_name": rel_path, "caption": caption})
+        self.finish(json.dumps(finish_ret))
 
 
 # Runs ML on given image

static/webapp.js

@@ -2,12 +2,16 @@
 
 // Adds a new image to the image picker from the given return json of an upload
 function add_thumbnails(data) {
-    if (get_keys().includes(data["file_name"]) == false) {
-        $('#thumbnails select').prepend($("<option></option>")
-            .attr("data-img-src", data["file_name"])
-            .attr("data-img-label", data["caption"])
-            .attr("data-img-alt", data["caption"])
-            .text(data["caption"]));
+    key_list = get_keys()
+    for (var i = 0; i < data.length; i++) {
+        file_data = data[i];
+        if (key_list.includes(file_data["file_name"]) == false) {
+            $('#thumbnails select').prepend($("<option></option>")
+                .attr("data-img-src", file_data["file_name"])
+                .attr("data-img-label", file_data["caption"])
+                .attr("data-img-alt", file_data["caption"])
+                .text(file_data["caption"]));
+        }
     }
 }
 
@@ -183,6 +187,8 @@ $(function() {
         var form = event.target;
         var data = new FormData(form);
 
+        $("#file-submit").text("Uploading...")
+
         // Perform file upload
         $.ajax({
             url: "/upload",
@@ -195,6 +201,8 @@ $(function() {
             success: function(data) {
                 add_thumbnails(data);
                 set_img_picker();
+                $("#file-submit").text("Submit");
+                $("#file-input").val("");
             }
         })
     })

templates/index.html

@@ -48,9 +48,9 @@ <h1>MAX Image Caption Generator</h1>
                         <div class="panel-body">
                             <form id="img-upload" enctype="multipart/form-data">
                                 <div class="form-group">
-                                    <input id="file-input" type="file" name="file"/>
+                                    <input id="file-input" type="file" name="file" multiple />
                                 </div>
-                                <button type="submit" class="btn btn-primary">Submit</button>
+                                <button id="file-submit" type="submit" class="btn btn-primary">Submit</button>
                             </form>
                         </div>