Add AJAX file delete support and upload notifications, make UI nicer

apps/map/templates/map/form.html

@@ -33,6 +33,41 @@
     border: 1px solid #ccc;
     font-weight: bold;
   }
+
+  .filewidget--input { position: absolute; left: -1000px; }
+  .filewidget--list {
+    list-style-type: none;
+    padding-left: 0;
+    margin-left: 0;
+    margin-top: 12px;
+  }
+
+  .filewidget--file {
+    border: 1px solid #aaa;
+    display: inline-block;
+    padding: 4px 8px;
+    width: 34em;
+    background-color: #eee;
+    border-radius: 4px;
+    cursor: default;
+  }
+
+  .filewidget--file--icon {
+    margin-right: 8px;
+  }
+
+  .filewidget--file--actions {
+    float: right;
+  }
+
+  .filewidget--file--actions a {
+    color: black;
+    cursor: pointer;
+  }
+
+  .filewidget--file--actions a:hover {
+    color: red;
+  }
   </style>
 {% endblock %}
 

apps/map/templates/map/forms/widgets/file.html

@@ -0,0 +1,7 @@
+<div class="filewidget" data-field="{{ widget.attrs.field }}">
+    <label class="filewidget--add btn btn-success">
+        <input class="filewidget--input" type="file" multiple data-url="{{ widget.attrs.url }}">
+        <i class="fa fa-plus"></i>&nbsp;Add files
+    </label>
+    <ul class="filewidget--list"></ul>
+</div>