SDropZone <s-drop-zone>

Un área de carga de archivos que acepta archivos arrastrándolos y soltándolos o desde un selector de archivos. SDropZone es el wrapper de Vue 3 tipado del web component <s-drop-zone> de Shopify Polaris.

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

Buenas prácticas

• Indica los límites de archivos con accept. Establece restricciones claras sobre los tipos de archivo que admite la zona de soltar.
• Gestiona droprejected con un mensaje útil. Cuando un archivo no supere la validación, escucha el evento e indica a los comerciantes qué salió mal.
• Considera usar disabled durante el procesamiento. Desactivar la zona de soltar durante una subida evita que los comerciantes añadan más archivos mientras tanto.

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

Consulta las buenas prácticas de Shopify para <s-drop-zone> (en inglés) para ver todas las recomendaciones.

Ejemplo

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 en <SDropZone> se vincula a la propiedad value y escucha el event DOM input.

<SDropZone v-model="value" />

equivale a:

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

Props

Prop	Tipo	Descripción
accept	string	Una cadena que representa los tipos de archivo que acepta la zona de soltado. Esta cadena es una lista separada por comas de especificadores únicos de tipo de archivo, que pueden ser uno de los siguientes: - Una extensión de archivo que empieza por un punto (".") (p. ej., .jpg, .pdf, .doc) - Una cadena de tipo MIME válida sin extensiones Si se omite, se aceptan todos los tipos de archivo.
accessibilityLabel	string	Una etiqueta que describe el propósito o el contenido del elemento. Cuando se define, se anuncia a los compradores que usan tecnologías de asistencia y les proporciona más contexto.
disabled	boolean	Desactiva el campo e impide cualquier interacción.
error	any	Indica un error al usuario. El campo recibe un tratamiento estilístico específico para comunicar problemas que deben resolverse de inmediato.
files	readonly File[]	Un array de objetos File que representa los archivos que el usuario tiene seleccionados actualmente. Esta propiedad es de solo lectura y no puede modificarse directamente. Para borrar los archivos seleccionados, establece la prop value en una cadena vacía o en null.
label	any	Contenido que se usa como etiqueta del campo.
labelAccessibilityVisibility	"visible" | "exclusive"	Cambia la visibilidad de la etiqueta del componente. - visible: la etiqueta es visible para todos los usuarios. - exclusive: la etiqueta se oculta visualmente, pero permanece en el árbol de accesibilidad.
multiple	boolean	Si se pueden seleccionar o soltar varios archivos a la vez.
name	string	Un identificador del campo que es único dentro del formulario contenedor más cercano.
required	boolean	Si el campo requiere un valor. Este requisito añade valor semántico al campo, pero no hará que aparezca un error automáticamente. Si quieres mostrar un error cuando este campo esté vacío, puedes hacerlo con la propiedad error.
value	string	Una cadena que representa la ruta a los archivos seleccionados. Si todavía no se ha seleccionado ningún archivo, el valor es una cadena vacía (""). Cuando el usuario selecciona varios archivos, el valor representa el primer archivo de la lista de archivos seleccionados. El valor siempre es el nombre del archivo precedido de "C:\fakepath", que no es la ruta real del archivo.

Events

Event	Tipo
change	Event
droprejected	CustomEvent
input	Event

Escúchalos con listeners del estilo @change en <SDropZone>.

Slots

Slot	Descripción
default	El contenido que se incluye dentro del contenedor de la zona de soltar