SDropZone <s-drop-zone>

Une zone d'import de fichiers qui accepte les fichiers par glisser-déposer ou via un sélecteur de fichiers. SDropZone est le wrapper Vue 3 typé du web component <s-drop-zone> de Shopify Polaris.

import { SDropZone } from 'polaris-vue-elements'

Bonnes pratiques

• Indiquez les limites de fichiers avec accept. Définissez des restrictions claires sur les types de fichiers acceptés par la zone de dépôt.
• Gérez droprejected avec un message utile. Lorsqu'un fichier échoue à la validation, écoutez l'événement et expliquez aux marchands ce qui s'est mal passé.
• Envisagez disabled pendant le traitement. Désactiver la zone de dépôt pendant un téléversement empêche les marchands d'ajouter d'autres fichiers entre-temps.

<SDropZone label="Product images" accept="image/*" />

Consultez les bonnes pratiques de Shopify pour <s-drop-zone> (en anglais) pour l'ensemble des recommandations.

Exemple

Value: (empty)

<script setup>
import { ref } from 'vue'
import { SDropZone } from 'polaris-vue-elements'

const value = ref('')
</script>

<template>
  <SDropZone label="Upload a file" accept="image/*" v-model="value" />
  <p>Value: {{ value }}</p>
</template>

v-model

v-model sur <SDropZone> est lié à la propriété value et écoute l'event DOM input.

<SDropZone v-model="value" />

équivaut à :

<SDropZone :value="value" @input="value = $event.target.value" />

Props

Prop	Type	Description
accept	string	Une chaîne représentant les types de fichiers acceptés par la zone de dépôt. Cette chaîne est une liste, séparée par des virgules, de spécificateurs de type de fichier uniques, chacun pouvant être : - Une extension de fichier commençant par un point (".") (p. ex. .jpg, .pdf, .doc) - Une chaîne de type MIME valide, sans extension Si elle est omise, tous les types de fichiers sont acceptés.
accessibilityLabel	string	Un libellé qui décrit l'objectif ou le contenu de l'élément. Lorsqu'il est défini, il est annoncé aux acheteurs utilisant des technologies d'assistance et leur apporte davantage de contexte.
disabled	boolean	Désactive le champ, empêchant toute interaction.
error	any	Signale une erreur à l'utilisateur. Le champ reçoit un traitement visuel spécifique pour signaler des problèmes à résoudre immédiatement.
files	readonly File[]	Un tableau d'objets File représentant les fichiers actuellement sélectionnés par l'utilisateur. Cette propriété est en lecture seule et ne peut pas être modifiée directement. Pour effacer les fichiers sélectionnés, définissez la prop value sur une chaîne vide ou null.
label	any	Contenu à utiliser comme libellé du champ.
labelAccessibilityVisibility	"visible" | "exclusive"	Modifie la visibilité du libellé du composant. - visible : le libellé est visible par tous les utilisateurs. - exclusive : le libellé est masqué visuellement mais reste dans l'arbre d'accessibilité.
multiple	boolean	Indique si plusieurs fichiers peuvent être sélectionnés ou déposés à la fois.
name	string	Un identifiant du champ, unique au sein du formulaire parent le plus proche.
required	boolean	Indique si le champ exige une valeur. Cette exigence ajoute une valeur sémantique au champ, mais n'affiche pas automatiquement d'erreur. Pour afficher une erreur lorsque ce champ est vide, utilisez la propriété error.
value	string	Une chaîne qui représente le chemin du ou des fichiers sélectionnés. Si aucun fichier n'est encore sélectionné, la valeur est une chaîne vide (""). Lorsque l'utilisateur a sélectionné plusieurs fichiers, la valeur représente le premier fichier de la liste sélectionnée. La valeur est toujours le nom du fichier précédé de "C:\fakepath", qui n'est pas le chemin réel du fichier.

Events

Event	Type
change	Event
droprejected	CustomEvent
input	Event

Écoutez-les avec des listeners de la forme @change sur <SDropZone>.

Slots

Slot	Description
default	Le contenu à inclure dans le conteneur de la zone de dépôt