Upload Frame

No notes defined.

<div class="sds-upload" data-js-upload>
    <input type="file" id="" class="sr-only">
    <div class="sds-upload__inner">
        <div class="sds-upload__content">

            <span class="sds-iconBlock -iconBlockInverse sds-upload__iconBlock" aria-hidden="true">
                <span class="sds-iconBlock__icon sds-icon sds-icon-document"></span>
            </span>

            <div class="sds-upload__text text-truncate sds-headingColor">
                <p class="sds-upload__heading">
                    <label for="" class="sds-upload__label stretched-link"></label>
                </p>
                <p class="sds-upload__meta sds-textHelper">

                </p>
            </div>
        </div>

        <div class="sds-upload__actions d-none" data-js-upload-actions>
            <div class="sds-btnGroup -aboveClickArea">

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>
 
<div class="{{ namespace }}upload{% for mod in modifiers %} {{ mod }}{% endfor %}{% for mod in classes %} {{ mod }}{% endfor %}" data-js-upload>
	<input type="file"{% if disabled %} disabled{% endif%} id="{{ for }}" class="sr-only{% if error %} is-invalid{% endif%}">
	<div class="{{ namespace }}upload__inner">
		<div class="{{ namespace }}upload__content">
			{% if image %}
				{% render "@media--xs",uploadMediaOptions,true %}
			{% else %}
				{% if large %}
				{% render "@icon-block--large",{
					classes: ["-iconBlockInverse",namespace+"upload__iconBlock"],
					icon: "icon-document"
				},true %}
				{% else %}
				{% render "@icon-block",{
					classes: ["-iconBlockInverse",namespace+"upload__iconBlock"],
					icon: "icon-document"
				},true %}
				{% endif %}
			{% endif %}
			<div class="{{ namespace }}upload__text text-truncate {{ namespace }}headingColor">
				<p class="{{ namespace }}upload__heading">
					<label for="{{ for }}" class="{{ namespace }}upload__label stretched-link">{{ text }}</label>
				</p>
				<p class="{{ namespace }}upload__meta {{ namespace }}textHelper">
					{{ meta }}
				</p>
			</div>
		</div>
		{% if noActions %}
		{% else %}
			<div class="{{ namespace }}upload__actions{% if actionsShown %}{% else %} d-none{% endif %}" data-js-upload-actions>
				<div class="{{ namespace }}btnGroup -aboveClickArea">
					{% if uploadView %}
						{% render "@icon-btn-secondary-inverse",{
							icon: "icon-visible"
						},true %}
					{% endif %}
					{% if uploadReupload %}
						{% render "@icon-btn-secondary-inverse",{
							icon: "icon-reload"
						},true %}
					{% endif %}
					{% if uploadDelete %}
						{% render "@icon-btn-secondary-inverse",{
							icon: "icon-trash",
							attrs: {
								"data-js-upload-clear":""
							}
						},true %}
					{% endif %}
				</div>
			</div>
		{% endif %}
	</div>
	<div class="{{ namespace }}upload__errorMsg invalid-feedback">
		{ Error message }
	</div>
</div>