SDropZone <s-drop-zone>

File upload का एक क्षेत्र जो drag and drop से या file picker से files स्वीकार करता है। SDropZone Shopify के Polaris <s-drop-zone> web component का typed Vue 3 wrapper है।

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

Best practices

• accept से file की सीमाएँ बताएँ। Drop zone कौन-से file types स्वीकार करता है, इस पर साफ़ प्रतिबंध सेट करें।
• droprejected को एक मददगार संदेश के साथ संभालें। जब कोई file validation में फ़ेल हो, तो इस event को सुनें और merchants को बताएँ कि क्या गलत हुआ।
• Processing के दौरान disabled पर विचार करें। Upload के दौरान drop zone को बंद करने से merchants उस बीच और files नहीं जोड़ पाते।

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

सभी सुझावों के लिए <s-drop-zone> के लिए Shopify की best practices (अंग्रेज़ी में) देखें।

उदाहरण

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

<SDropZone> पर v-model value property से bind होता है और input DOM event को सुनता है।

<SDropZone v-model="value" />

इसके बराबर है:

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

Props

Prop	Type	विवरण
accept	string	drop zone द्वारा स्वीकार किए जाने वाले file types को दर्शाने वाली string। यह string unique file type specifiers की comma से अलग की गई सूची है, जो इनमें से कोई एक हो सकते हैं: - period (".") character से शुरू होने वाला file extension (जैसे .jpg, .pdf, .doc) - बिना extensions वाली कोई मान्य MIME type string अगर इसे छोड़ दिया जाए, तो सभी file types स्वीकार किए जाते हैं।
accessibilityLabel	string	item का उद्देश्य या content बताने वाला label। सेट होने पर, assistive technologies इस्तेमाल करने वाले खरीदारों को इसकी घोषणा की जाएगी और उन्हें अधिक संदर्भ मिलेगा।
disabled	boolean	field को disable करता है, जिससे कोई भी interaction संभव नहीं रहता।
error	any	user को error बताएँ। field को एक विशेष style दिया जाएगा, ताकि ऐसी समस्याएँ बताई जा सकें जिन्हें तुरंत हल करना ज़रूरी है।
files	readonly File[]	user द्वारा अभी चुनी गई files को दर्शाने वाले File objects का array। यह property read-only है और इसे सीधे बदला नहीं जा सकता। चुनी गई files हटाने के लिए, value prop को खाली string या null पर सेट करें।
label	any	field label के रूप में उपयोग होने वाला content।
labelAccessibilityVisibility	"visible" | "exclusive"	component के label की visibility बदलता है। - visible: label सभी users को दिखाई देता है। - exclusive: label दृश्य रूप से छिपा रहता है लेकिन accessibility tree में बना रहता है।
multiple	boolean	क्या एक साथ कई files चुनी या drop की जा सकती हैं।
name	string	field के लिए identifier, जो सबसे नज़दीकी containing form के भीतर unique हो।
required	boolean	क्या field के लिए कोई मान ज़रूरी है। यह आवश्यकता field में semantic अर्थ जोड़ती है, लेकिन इससे अपने आप कोई error नहीं दिखेगा। यदि आप चाहते हैं कि यह field खाली होने पर error दिखे, तो आप error property के साथ ऐसा कर सकते हैं।
value	string	चुनी गई file(s) का path दर्शाने वाली string। अगर अभी तक कोई file नहीं चुनी गई है, तो value एक खाली string ("") होती है। जब user कई files चुनता है, तो value उनकी चुनी गई files की सूची की पहली file को दर्शाती है। value हमेशा file का नाम होती है जिसके आगे "C:\fakepath\" लगा होता है, जो file का असली path नहीं है।

Events

Event	Type
change	Event
droprejected	CustomEvent
input	Event

इन्हें <SDropZone> पर @change जैसे listeners से सुनें।

Slots

Slot	विवरण
default	drop zone container के अंदर शामिल की जाने वाली सामग्री