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

apps/map/forms.py

@@ -81,15 +81,17 @@ class ShortCaseStudyForm(BaseCaseStudyForm):
         ]
 
 
+class BootstrapClearableFileInput(forms.ClearableFileInput):
+    template_name = 'map/forms/widgets/file.html'
+
+
 class LongCaseStudyForm(BaseCaseStudyForm):
     """Long version of the CaseStudy form."""
 
     official_project_documents = forms.FileField(
-        widget=forms.ClearableFileInput(attrs={
-            'multiple': True,
-            'data-url': reverse_lazy('files:upload'),
-            'data-field': 'official_project_documents_files',
-            'class': 'fileupload',
+        widget=BootstrapClearableFileInput(attrs={
+            'url': reverse_lazy('files:upload'),
+            'field': 'official_project_documents_files',
         }), required=False
     )
 
@@ -100,11 +102,9 @@ class LongCaseStudyForm(BaseCaseStudyForm):
     )
 
     other_documents = forms.FileField(
-        widget=forms.ClearableFileInput(attrs={
-            'multiple': True,
+        widget=BootstrapClearableFileInput(attrs={
             'data-url': reverse_lazy('files:upload'),
             'data-field': 'other_documents_files',
-            'class': 'fileupload',
         }), required=False
     )
 
@@ -115,11 +115,9 @@ class LongCaseStudyForm(BaseCaseStudyForm):
     )
 
     shapefiles = forms.FileField(
-        widget=forms.ClearableFileInput(attrs={
-            'multiple': True,
+        widget=BootstrapClearableFileInput(attrs={
             'data-url': reverse_lazy('files:upload'),
             'data-field': 'shapefiles_files',
-            'class': 'fileupload',
         }), required=False
     )
 

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>