Update funding form to handle uploading pdf/png

atst/domain/csp/files.py

@@ -8,7 +8,7 @@ from atst.domain.exceptions import UploadError
 
 
 class FileProviderInterface:
-    _PERMITTED_MIMETYPES = ["application/pdf"]
+    _PERMITTED_MIMETYPES = ["application/pdf", "image/png"]
 
     def _enforce_mimetype(self, fyle):
         # TODO: for hardening, we should probably use a better library for

atst/domain/task_orders.py

@@ -25,7 +25,7 @@ class TaskOrders(object):
         ],
         "funding": [
             "performance_length",
-            # "pdf",
+            "csp_estimate",
             "clin_01",
             "clin_02",
             "clin_03",

atst/forms/task_order.py

@@ -11,6 +11,7 @@ from wtforms.fields import (
 from wtforms.fields.html5 import DateField, TelField
 from wtforms.widgets import ListWidget, CheckboxInput
 from wtforms.validators import Length
+from flask_wtf.file import FileAllowed
 
 from atst.forms.validators import IsNumber, PhoneNumber, RequiredIf
 
@@ -86,9 +87,14 @@ class FundingForm(CacheableForm):
     end_date = DateField(
         translate("forms.task_order.end_date_label"), format="%m/%d/%Y"
     )
-    pdf = FileField(
-        translate("forms.task_order.pdf_label"),
-        description=translate("forms.task_order.pdf_description"),
+    csp_estimate = FileField(
+        translate("forms.task_order.csp_estimate_label"),
+        description=translate("forms.task_order.csp_estimate_description"),
+        validators=[
+            FileAllowed(
+                ["pdf", "png"], translate("forms.task_order.file_format_not_allowed")
+            )
+        ],
     )
     clin_01 = IntegerField(translate("forms.task_order.clin_01_label"))
     clin_02 = IntegerField(translate("forms.task_order.clin_02_label"))

js/components/forms/funding.js

@@ -19,6 +19,10 @@ export default {
     initialData: {
       type: Object,
       default: () => ({})
+    },
+    uploadErrors: {
+      type: Array,
+      default: () => ([])
     }
   },
 
@@ -28,6 +32,7 @@ export default {
       clin_02 = 0,
       clin_03 = 0,
       clin_04 = 0,
+      csp_estimate,
     } = this.initialData
 
     return {
@@ -35,6 +40,7 @@ export default {
       clin_02,
       clin_03,
       clin_04,
+      showUpload: !csp_estimate || this.uploadErrors.length > 0
     }
   },
 
@@ -57,6 +63,9 @@ export default {
       const mask = createNumberMask({ prefix: '$', allowDecimal: true })
       return conformToMask(intValue.toString(), mask).conformedValue
     },
+    showUploadInput: function() {
+      this.showUpload = true
+    },
     updateBudget: function() {
       document.querySelector('#to-target').innerText = this.totalBudgetStr
     }

templates/task_orders/new/funding.html

@@ -12,7 +12,11 @@
 
 {% block form %}
 
-<funding inline-template v-bind:initial-data='{{ form.data|tojson }}'>
+<funding
+  inline-template
+  v-bind:initial-data='{{ form.data|mixedContentToJson }}'
+  v-bind:upload-errors='{{ form.csp_estimate.errors | list }}'
+  >
   <div>
     <!-- Get Funding Section           -->
     <h3 class="subheading">{{ "task_orders.new.funding.performance_period_title" | translate }}</h3>
@@ -28,13 +32,22 @@
       {{ Icon("link")}} Cloud Service Provider's estimate calculator
     </a></p>
     <p>{{ "task_orders.new.funding.estimate_usage_paragraph" | translate }}</p>
-    <div class="usa-input">
-      <div class="usa-input__title">
-        {{ form.pdf.label }}
+    <template v-if="showUpload">
+      <div class="usa-input {% if form.csp_estimate.errors %} usa-input--error {% endif %}">
+        {{ form.csp_estimate.label }}
+        {{ form.csp_estimate.description }}
+        {{ form.csp_estimate }}
+        {% for error in form.csp_estimate.errors %}
+          <span class="usa-input__message">{{error}}</span>
+        {% endfor %}
       </div>
-      {{ form.pdf.description }}
-      <input type="file" disabled="disabled" />
-    </div>
+    </template>
+    <template v-else>
+      <p>Uploaded {{ form.csp_estimate.data.filename }}</p>
+      <div>
+        <button type="button" v-on:click="showUploadInput">Change</button>
+      </div>
+    </template>
 
     <hr>
 

translations.yaml

@@ -214,8 +214,9 @@ forms:
       label: Period of Performance length
     start_date_label: Start Date
     end_date_label: End Date
-    pdf_label: Upload a copy of your CSP Cost Estimate Research
-    pdf_description: Upload a PDF or screenshot of your usage estimate from the calculator.
+    csp_estimate_label: Upload a copy of your CSP Cost Estimate Research
+    csp_estimate_description: Upload a PDF or screenshot of your usage estimate from the calculator.
+    file_format_not_allowed: Only PDF or PNG files can be uploaded.
     clin_01_label: 'CLIN 01 : Unclassified'
     clin_02_label: 'CLIN 02: Classified'
     clin_03_label: 'CLIN 03: Unclassified'