See "img upload" in sidebar snet/molecules for variants, or go to info panel and look for it in "references" (@snet-img-upload)
Refer to modal frame found in view tab for complete structure without content.
A modal's default size is 640px
Modifier classes for modals
A modal with a content loading component behaves as follows:
<div class="sds-modal modal fade" id="mailboxModal" aria-hidden="true" tabindex="-1">
<div class="sds-modal__dialog modal-dialog modal-dialog-centered">
<div class="sds-modal__content modal-content">
<div class="sds-modal__header modal-header">
<div class="sds-modal__title modal-title">Rédiger un message</div>
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnSecondary -ghost sds-modal__close" data-dismiss="modal" aria-label="Close">
<span class="sds-icon sds-icon-close"></span>
</button>
</div>
<div class="sds-modal__body modal-body">
<div class="sds-stackLg">
<div class="form-group">
<label for="mailbox-objet" class="sds-label -form">
Objet
</label>
<div class="sds-input">
<input id="mailbox-objet" class="sds-input form-control" type="text" placeholder="Objet" value="">
</div>
</div>
<div class="form-group">
<label for="mailbox-message" class="sds-label -form">
Votre message
</label>
<div class="sds-textarea">
<textarea class="form-control" id="" rows="1" placeholder="Votre message"></textarea>
</div>
</div>
<div class="sds-stackExceptionMd sds-stackMd">
<div class="sds-imgUpload -box -small -uploadComplete">
<div class="sds-imgUpload__content">
<div class="sds-imgUpload__iconWrapper">
<span class="sds-iconCircle -secondary10 sds-imgUpload__icon" aria-hidden="true">
<span class="sds-icon sds-icon-document"></span>
</span>
<div class="sds-imgUpload__progress">
<div class="sds-circularProgress">
<svg viewBox="0 0 36 36" class="">
<path class="sds-circularProgress__shape" stroke-dasharray="50, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
</div>
</div>
</div>
<div class="sds-stackXxs">
<div class="sds-imgUpload__title">
Upload file(s)
</div>
<div class="sds-imgUpload__meta sds-textHelper">{Weight}</div>
</div>
</div>
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnPrimary sds-imgUpload__reset">
<span class="sds-icon sds-icon-trash"></span>
<div class="sr-only">Delete uploaded image</div>
</button>
</div>
<div class="sds-imgUpload -box -small -loading">
<div class="sds-imgUpload__content">
<input type="file" id="imgUpload" class="sr-only">
<div class="sds-imgUpload__iconWrapper">
<span class="sds-iconCircle -secondary10 sds-imgUpload__icon" aria-hidden="true">
<span class="sds-icon sds-icon-documentupload"></span>
</span>
<div class="sds-imgUpload__progress">
<div class="sds-circularProgress">
<svg viewBox="0 0 36 36" class="">
<path class="sds-circularProgress__shape" stroke-dasharray="50, 100" d="M18 2.0845
a 15.9155 15.9155 0 0 1 0 31.831
a 15.9155 15.9155 0 0 1 0 -31.831" />
</svg>
</div>
</div>
</div>
<div class="sds-stackXxs">
<div class="sds-imgUpload__title">
<label for="imgUpload" class="sds-imgUpload__label stretched-link">Upload file(s)</label>
</div>
<div class="sds-imgUpload__meta sds-textHelper">{file_name.format (Weight)}</div>
</div>
</div>
<button type="button" class="sds-iconBtn -iconBtnBase -iconBtnPrimary sds-imgUpload__reset">
<span class="sds-icon sds-icon-trash"></span>
<div class="sr-only">Delete uploaded image</div>
</button>
</div>
</div>
</div>
</div>
<div class="sds-modal__footer modal-footer">
<div class="d-flex justify-content-between w-100">
<button type="button" class="sds-btn -btnBase -btnBaseSecondary">
<span class="sds-icon sds-icon-clip"></span>
<span class="sds-btn__text">Ajouter un document</span>
</button>
<div class="sds-btnGroup">
<button type="button" class="sds-btn -btnCta -btnCtaSuccess" data-dismiss="modal">
<span class="sds-btn__text">Envoyer</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
{% extends "@snet-modal-base-frame" %}
{% block header %}
<div class="{{ namespace }}modal__title modal-title">Rédiger un message</div>
{% endblock %}
{% block body %}
<div class="{{ namespace }}stackLg">
<div class="form-group">
{% render "@label--form",{
text: "Objet",
labelFor: "mailbox-objet"
},true %}
{% render "@input",{
placeholder: "Objet",
id: "mailbox-objet"
},true %}
</div>
<div class="form-group">
{% render "@label--form",{
text: "Votre message",
labelFor: "mailbox-message"
},true %}
{% render "@textarea",{
placeholder: "Votre message",
id: "mailbox-message"
},true %}
</div>
<div class="{{ namespace }}stackExceptionMd {{ namespace }}stackMd">
{% render "@snet-img-upload--box-small-complete" %}
{% render "@snet-img-upload--box-small-upload" %}
</div>
</div>
{% endblock %}
{% block footer %}
{% if footer %}
<div class="d-flex justify-content-between w-100">
{% render "@btn-base-secondary--icon-left", {
text: "Ajouter un document",
icon: "icon-clip"
} ,true %}
<div class="{{ namespace }}btnGroup">
{% render "@btn-cta-success",{
text: "Envoyer",
attrs: {
"data-dismiss": "modal"
}
},true %}
</div>
</div>
{% endif %}
{% endblock %}