Composant

Ajout de fichiers

Le composant d’ajout de fichiers permet de sélectionner un ou plusieurs documents depuis l’appareil de l’utilisateur. Il prend en charge les indications, la validation et le glisser-déposer.

Fichier unique

Utilisez .lumy-upload pour regrouper le libellé, le champ natif et les messages associés.

HTML 
<div class="lumy-upload">
    <label
        class="lumy-upload__label"
        for="upload-document"
    >
        Ajouter un document

        <span
            class="lumy-upload__hint"
            id="upload-document-hint"
        >
            Taille maximale : 10 Mo. Formats acceptés :
            JPG, PNG et PDF.
        </span>
    </label>

    <input
        class="lumy-upload__input"
        id="upload-document"
        name="document"
        type="file"
        accept=".jpg,.jpeg,.png,.pdf"
        data-lumy-upload-max-size="10485760"
        aria-describedby="upload-document-hint upload-document-messages"
    >

    <div
        class="lumy-upload__messages"
        id="upload-document-messages"
        aria-live="polite"
    ></div>
</div>

Plusieurs fichiers

Ajoutez l’attribut multiple pour permettre la sélection de plusieurs fichiers.

HTML 
<div class="lumy-upload">
    <label
        class="lumy-upload__label"
        for="upload-files"
    >
        Ajouter des pièces jointes

        <span
            class="lumy-upload__hint"
            id="upload-files-hint"
        >
            Plusieurs fichiers possibles. Taille maximale
            par fichier : 10 Mo.
        </span>
    </label>

    <input
        class="lumy-upload__input"
        id="upload-files"
        name="attachments[]"
        type="file"
        accept=".jpg,.jpeg,.png,.pdf"
        multiple
        data-lumy-upload-max-size="10485760"
        aria-describedby="upload-files-hint upload-files-messages"
    >

    <div
        class="lumy-upload__messages"
        id="upload-files-messages"
        aria-live="polite"
    ></div>
</div>

Zone de dépôt

La variante avec zone de dépôt permet de sélectionner les fichiers avec le bouton système ou de les déposer directement dans la zone.

HTML 
<div class="lumy-upload">
    <label
        class="lumy-upload__label"
        for="upload-dropzone"
    >
        Importer des documents

        <span
            class="lumy-upload__hint"
            id="upload-dropzone-hint"
        >
            PDF, JPG ou PNG. Taille maximale : 10 Mo.
        </span>
    </label>

    <div class="lumy-upload__dropzone">
        <input
            class="lumy-upload__input"
            id="upload-dropzone"
            name="documents[]"
            type="file"
            accept=".jpg,.jpeg,.png,.pdf"
            multiple
            data-lumy-upload-max-size="10485760"
            aria-describedby="upload-dropzone-hint upload-dropzone-messages"
        >

        <div
            class="lumy-upload__dropzone-content"
            aria-hidden="true"
        >
            <span class="lumy-upload__icon">↑</span>

            <span class="lumy-upload__dropzone-title">
                Déposez vos fichiers ici
            </span>

            <span class="lumy-upload__dropzone-text">
                ou cliquez pour parcourir votre appareil
            </span>
        </div>
    </div>

    <div
        class="lumy-upload__messages"
        id="upload-dropzone-messages"
        aria-live="polite"
    ></div>
</div>

États

Le composant prend en charge les états désactivé, invalide et valide.

HTML — Désactivé 
<div class="lumy-upload lumy-upload--disabled">
    <label
        class="lumy-upload__label"
        for="upload-disabled"
    >
        Ajouter un document

        <span
            class="lumy-upload__hint"
            id="upload-disabled-hint"
        >
            Cette fonctionnalité n’est pas disponible.
        </span>
    </label>

    <input
        class="lumy-upload__input"
        id="upload-disabled"
        name="document"
        type="file"
        disabled
        aria-describedby="upload-disabled-hint upload-disabled-messages"
    >

    <div
        class="lumy-upload__messages"
        id="upload-disabled-messages"
        aria-live="polite"
    ></div>
</div>

Le format du fichier n’est pas pris en charge.

HTML — Erreur 
<div class="lumy-upload lumy-upload--error">
    <label
        class="lumy-upload__label"
        for="upload-error"
    >
        Ajouter une image

        <span
            class="lumy-upload__hint"
            id="upload-error-hint"
        >
            Formats acceptés : JPG et PNG.
        </span>
    </label>

    <input
        class="lumy-upload__input"
        id="upload-error"
        name="image"
        type="file"
        accept=".jpg,.jpeg,.png"
        aria-invalid="true"
        aria-describedby="upload-error-hint upload-error-message"
    >

    <div
        class="lumy-upload__messages"
        id="upload-error-messages"
        aria-live="polite"
    >
        <p
            class="lumy-upload__message lumy-upload__message--error"
            id="upload-error-message"
        >
            Le format du fichier n’est pas pris en charge.
        </p>
    </div>
</div>

Fichier correctement ajouté.

HTML — Valide 
<div class="lumy-upload lumy-upload--valid">
    <label
        class="lumy-upload__label"
        for="upload-valid"
    >
        Ajouter un document

        <span
            class="lumy-upload__hint"
            id="upload-valid-hint"
        >
            Formats acceptés : PDF.
        </span>
    </label>

    <input
        class="lumy-upload__input"
        id="upload-valid"
        name="document"
        type="file"
        accept=".pdf"
        aria-describedby="upload-valid-hint upload-valid-message"
    >

    <div
        class="lumy-upload__messages"
        id="upload-valid-messages"
        aria-live="polite"
    >
        <p
            class="lumy-upload__message lumy-upload__message--valid"
            id="upload-valid-message"
        >
            Fichier correctement ajouté.
        </p>
    </div>
</div>

Accessibilité

  • Chaque champ doit avoir un libellé <label> lié avec les attributs for et id.
  • Les indications et les messages doivent être référencés par aria-describedby.
  • En cas d’erreur, utilisez aria-invalid="true" sur le champ.
  • Le conteneur de messages utilise aria-live="polite" pour annoncer les changements sans interrompre l’utilisateur.
  • L’attribut accept facilite la sélection, mais la validation définitive doit toujours être réalisée côté serveur.
  • La taille et le type des fichiers doivent également être contrôlés côté serveur : le JavaScript du navigateur peut être contourné.
  • Utilisez l’attribut multiple uniquement lorsque plusieurs fichiers sont réellement acceptés.