atst/templates/components/upload_input.html

56 lines
2.1 KiB
HTML

{% from "components/icon.html" import Icon %}
{% macro UploadInput(field, show_label=False, watch=False, token="", object_name="") -%}
<uploadinput
inline-template
{% if not field.errors %}
v-bind:initial-data='{{ field.filename.data | tojson }}'
{% else %}
v-bind:initial-errors='true'
{% endif %}
v-bind:watch='{{ watch | string | lower }}'
name='{{ field.name }}'
:optional='false'
v-bind:token='{{ token | tojson }}'
v-bind:object-name='"{{ object_name | string }}"'
>
<div>
<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" v-bind:class='{ "usa-input": true, "usa-input--error": showErrors }'>
{% if show_label %}
{{ field.label }}
{% endif %}
{{ field.description }}
<div v-if="!hideInput" class="upload-widget">
<label class="upload-label" for="{{ field.name }}">
<span class="upload-button">
Browse
</span>
{% if field.errors %}
<span v-show="showErrors">{{ Icon('alert',classes="icon-validation") }}</span>
{% endif %}
</label>
<input
v-on:change="addAttachment"
ref="attachmentInput"
accept="{{ field.accept }}"
id="{{ field.name }}"
name="{{ field.name }}"
aria-label="Task Order Upload"
v-bind:value="attachment"
type="file">
<input type="hidden" name="{{ field.filename.name }}" id="{{ field.filename.name }}" ref="attachmentFilename">
<input type="hidden" name="{{ field.object_name.name }}" id="{{ field.object_name.name }}" ref="attachmentObjectName">
</div>
{% for error, error_message in field.errors.items() %}
<span v-show="showErrors" class="usa-input__message">{{error_message}}</span>
{% endfor %}
</div>
</div>
</uploadinput>
{%- endmacro %}