Retour

Ajout de fichier (upload)

Ce composant permet aux utilisateurs de sélectionner et envoyer un ou plusieurs fichiers.

Documentation

Bouton upload 1 seul fichier

<div class="village-upload-group" id="upload-group-1165">
    <label class="village-label" for="file-upload">
        Ajouter un fichier
        <span class="village-hint-text">Indication : taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.</span>
    </label>
    <input class="village-upload" aria-describedby="file-upload-messages" type="file" id="file-upload" name="file-upload">
    <div class="village-messages-group" id="file-upload-messages" aria-live="polite">
    </div>
</div>

Bouton upload avec erreur

Format de fichier non supporté

<div class="village-upload-group village-upload-group--error" id="upload-group-1168">
    <label class="village-label" for="file-upload-with-error">
        Ajouter un fichier
        <span class="village-hint-text">Indication : taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.</span>
    </label>
    <input class="village-upload" aria-describedby="file-upload-with-error-messages" type="file" id="file-upload-with-error" name="file-upload-with-error">
    <div class="village-messages-group" id="file-upload-with-error-messages" aria-live="polite">
        <p class="village-message village-message--error" id="file-upload-with-error-message-error">Format de fichier non supporté</p>
    </div>
</div>

Bouton upload fichiers multiples

<div class="village-upload-group" id="upload-group-1171">
    <label class="village-label" for="file-upload-multiple">
        Ajouter des fichiers
        <span class="village-hint-text">Indication : taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.</span>
    </label>
    <input class="village-upload" aria-describedby="file-upload-multiple-messages" multiple type="file" id="file-upload-multiple" name="file-upload-multiple">
    <div class="village-messages-group" id="file-upload-multiple-messages" aria-live="polite">
    </div>
</div>

Bouton upload désactivé

<div class="village-upload-group village-upload-group--disabled" id="upload-group-1174">
    <label class="village-label" for="file-upload-disabled">
        Ajouter un fichier
        <span class="village-hint-text">Indication : taille maximale : 500 Mo. Formats supportés : jpg, png, pdf. Plusieurs fichiers possibles. Lorem ipsum dolor sit amet, consectetur adipiscing.</span>
    </label>
    <input class="village-upload" disabled aria-describedby="file-upload-disabled-messages" type="file" id="file-upload-disabled" name="file-upload-disabled">
    <div class="village-messages-group" id="file-upload-disabled-messages" aria-live="polite">
    </div>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.