Basic frontend uploader component

templates/components/upload_input.html

@@ -1,24 +1,37 @@
+{% from "components/icon.html" import Icon %}
+
 {% macro UploadInput(field, show_label=False) -%}
 <uploadinput inline-template v-bind:initial-data='{{ field.data | tojson }}' v-bind:upload-errors='{{ field.errors | list }}'>
   <div>
-    <template v-if="showUpload">
-      <div class="usa-input {% if field.errors %} usa-input--error {% endif %}">
-        {% if show_label %}
-          {{ field.label }}
-        {% endif %}
-        {{ field.description }}
-        {{ field }}
-        {% for error in field.errors %}
-          <span class="usa-input__message">{{error}}</span>
-        {% endfor %}
+    <div v-show="hasAttachment" class="uploaded-file">
+      {{ Icon("check-circle-solid") }}
+      <span class="uploaded-file__name" v-html="baseName"></span>
+      <a href="#" class="uploaded-file__remove" v-on:click="removeAttachment">Remove</a>
+    </div>
+    <div v-show="hasAttachment === false" class="usa-input {% if field.errors %} usa-input--error {% endif %}">
+      {% if show_label %}
+        {{ field.label }}
+      {% endif %}
+      {{ field.description }}
+      <div class="upload-widget">
+        <label class="upload-label" for="{{ field.name }}">
+          <span class="upload-button">
+            Browse
+          </span>
+        </label>
+        <input
+          v-on:change="addAttachment"
+          ref="attachmentInput"
+          accept="{{ field.accept }}"
+          id="{{ field.name }}"
+          name="{{ field.name }}"
+          aria-label="Task Order Upload"
+          type="file">
       </div>
-    </template>
-    <template v-else>
-      <p>Uploaded {{ field.data.filename }}</p>
-      <div>
-        <button type="button" v-on:click="showUploadInput">Change</button>
-      </div>
-    </template>
+      {% for error in field.errors %}
+        <span class="usa-input__message">{{error}}</span>
+      {% endfor %}
+    </div>
   </div>
 </uploadinput>
 {%- endmacro %}