Upload Base

<!-- Default -->
<div class="sds-upload" data-js-upload>
    <input type="file" id="upload" 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 sds-headingColor">
                <p class="sds-upload__heading">
                    <label for="upload" class="sds-upload__label stretched-link">{Text}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

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

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-visible"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>

<!-- Truncated Text -->
<div class="sds-upload -uploadComplete" data-js-upload>
    <input type="file" id="upload" 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 sds-headingColor text-truncate">
                <p class="sds-upload__heading">
                    <label for="upload" class="sds-upload__label stretched-link text-truncate">{Long text to showcase truncation. Long text to showcase truncation. Long text to showcase truncation.}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

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

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-visible"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>

<!-- Disabled -->
<div class="sds-upload" data-js-upload>
    <input type="file" disabled id="uploadDisabled" 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 sds-headingColor">
                <p class="sds-upload__heading">
                    <label for="uploadDisabled" class="sds-upload__label stretched-link">{Text}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

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

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-visible"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>

<!-- Error -->
<div class="sds-upload" data-js-upload>
    <input type="file" id="uploadError" class="sr-only is-invalid">
    <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 sds-headingColor">
                <p class="sds-upload__heading">
                    <label for="uploadError" class="sds-upload__label stretched-link">{Text}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

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

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-reload"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>

<!-- Complete -->
<div class="sds-upload -uploadComplete" data-js-upload>
    <input type="file" id="uploadComplete" 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 sds-headingColor">
                <p class="sds-upload__heading">
                    <label for="uploadComplete" class="sds-upload__label stretched-link">{Text}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

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

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-visible"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>

<!-- Loading -->
<div class="sds-upload -uploadLoading" data-js-upload>
    <input type="file" disabled id="uploadLoading" 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 sds-headingColor">
                <p class="sds-upload__heading">
                    <label for="uploadLoading" class="sds-upload__label stretched-link">{Text}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

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

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-visible"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>

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

            <div class="sds-media -mediaXs -mediaHasBg -mediaRounded">

                <span class="sds-media__icon sds-icon sds-icon-photo"></span>

            </div>

            <div class="sds-upload__text sds-headingColor">
                <p class="sds-upload__heading">
                    <label for="uploadImage" class="sds-upload__label stretched-link">{Text}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

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

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-visible"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>

<!-- Image Uploaded -->
<div class="sds-upload -uploadComplete" data-js-upload>
    <input type="file" id="uploadImageUploaded" class="sr-only">
    <div class="sds-upload__inner">
        <div class="sds-upload__content">

            <div class="sds-media -mediaXs -mediaRounded">

                <img src="../../media/spuerkeess-site/components/testimonial-slider/smiling-student-female.png" alt="">

            </div>

            <div class="sds-upload__text sds-headingColor">
                <p class="sds-upload__heading">
                    <label for="uploadImageUploaded" class="sds-upload__label stretched-link">{Text}</label>
                </p>
                <p class="sds-upload__meta sds-textHelper">
                    {Weight}
                </p>
            </div>
        </div>

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

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse">

                    <span class="sds-icon sds-icon-visible"></span>

                </button>

                <button type="button" class="sds-btn -iconBtn -btnSecondary -btnInverse" data-js-upload-clear="">

                    <span class="sds-icon sds-icon-trash"></span>

                </button>

            </div>
        </div>

    </div>
    <div class="sds-upload__errorMsg invalid-feedback">
        { Error message }
    </div>
</div>