Google Picker वेब कॉम्पोनेंट का इस्तेमाल करना

Google Picker वेब कॉम्पोनेंट, Google Picker API को अपने वेब ऐप्लिकेशन में इंटिग्रेट करने का एक और तरीका है.

वेब कॉम्पोनेंट की मदद से, Google Drive में मौजूद फ़ाइलों को अपने वेब ऐप्लिकेशन में आसानी से इंटिग्रेट किया जा सकता है. यह एपीआई लोड करने और पुष्टि करने की सभी बॉयलरप्लेट लॉजिक को एक एचटीएमएल एलिमेंट में रैप करता है. इससे, gapi लोड करने का लॉजिक लिखे बिना, सीधे अपने कोड में <drive-picker> टैग जोड़ा जा सकता है. इसका इस्तेमाल, सामान्य एचटीएमएल और JavaScript में किया जा सकता है. साथ ही, यह फ़्रेमवर्क से अलग है. यह Svelte, Vue, Angular वगैरह के साथ आसानी से काम करता है.

वेब कॉम्पोनेंट लाइब्रेरी के बारे में ज़्यादा जानने के लिए, देखें @googleworkspace/drive-picker-element.

React ऐप्लिकेशन के लिए, वेब कॉम्पोनेंट के आधिकारिक React रैपर पैकेज: @googleworkspace/drive-picker-react का इस्तेमाल करें.

मुख्य सुविधाएं

• आसान इंटिग्रेशन: कोड की कुछ लाइनें जोड़कर, अपने वेब ऐप्लिकेशन में Google Picker जोड़ें.
• फ़्रेमवर्क से अलग: यह आपके चुने गए किसी भी वेब फ़्रेमवर्क (React, Vue, Angular वगैरह) के साथ आसानी से काम करता है.
• ओपन सोर्स और ज़रूरत के मुताबिक बनाया जा सकता है: कोड मुफ़्त में उपलब्ध है. इसे अपनी ज़रूरतों के हिसाब से बनाया जा सकता है.
• OAuth की सुविधा: यह उपयोगकर्ता की पुष्टि अपने-आप करता है. इससे उपयोगकर्ता को बेहतर अनुभव मिलता है.
• अपनी पसंद के मुताबिक व्यू: एट्रिब्यूट सेट करके, Google Picker को कॉन्फ़िगर करें, ताकि सिर्फ़ वे फ़ाइल टाइप या व्यू दिखें जिनकी आपको ज़रूरत है.

शुरू करें

1. NPM या इसी तरह के किसी अन्य टूल का इस्तेमाल करके कॉम्पोनेंट इंस्टॉल करें:

   npm i @googleworkspace/drive-picker-element

   सीडीएन वर्शन भी उपलब्ध है. उपलब्ध फ़ॉर्मैट और वर्शन देखने के लिए, unpkg देखें.

   <script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>
   

2. अपने JavaScript फ़ाइल में, @googleworkspace/drive-picker-element कॉम्पोनेंट इंपोर्ट करें:

   import "@googleworkspace/drive-picker-element";
   

   अगर सीडीएन वर्शन का इस्तेमाल किया जा रहा है, तो इंपोर्ट करने की ज़रूरत नहीं है. ऐसा इसलिए, क्योंकि यह Google Picker लाइब्रेरी और पुष्टि के लिए इस्तेमाल की जाने वाली Google API क्लाइंट लाइब्रेरी को अपने-आप लोड करता है.

3. अपने एचटीएमएल फ़ाइल में, कस्टम एलिमेंट जोड़ें:

   <drive-picker>
       <drive-picker-docs-view></drive-picker-docs-view>
   </drive-picker>
   

   <drive-picker/> और <drive-picker-docs-view/> के एट्रिब्यूट और प्रॉपर्टी के बारे में जानने के लिए, @googleworkspace/drive-picker-element के रेफ़रंस दस्तावेज़ देखें.

इवेंट

<drive-picker/> एलिमेंट, ये कस्टम इवेंट भेजता है:

इवेंट	ब्यौरा
picker-picked	यह तब ट्रिगर होता है, जब उपयोगकर्ता एक या उससे ज़्यादा आइटम चुनता है.
picker-canceled	यह तब ट्रिगर होता है, जब उपयोगकर्ता 'रद्द करें' बटन पर क्लिक करके या बिना कुछ चुने डायलॉग बंद करके, चुनाव रद्द करता है.
picker-error	यह तब ट्रिगर होता है, जब शुरू करने या फ़ाइल चुनने के दौरान कोई गड़बड़ी होती है.

इवेंट के बारे में ज़्यादा जानने के लिए, एनपीएम पर @googleworkspace/drive-picker-element का दस्तावेज़ देखें.

इवेंट की जानकारी

picker-picked इवेंट के लिए, इवेंट की जानकारी में Google Picker का पूरा Google Picker ResponseObject शामिल होता है.

{
  "type": "picker-picked",
  "detail": {
    "action": "PICKED",
    "docs": [
      {
        "id": ID,
        "mimeType": "application/pdf",
        "name": NAME,
        "url": "https://drive.google.com/file/d/ID/view?usp=drive_web",
        "sizeBytes": 12345
      }
    ]
  }
}

जवाब ऑब्जेक्ट में सबसे ज़्यादा इस्तेमाल की जाने वाली प्रॉपर्टी ये हैं:

• action: वह कार्रवाई जिससे कॉलबैक ट्रिगर हुआ (उदाहरण के लिए, PICKED).
• docs: उपयोगकर्ता द्वारा चुने गए DocumentObject का कलेक्शन. हर ऑब्जेक्ट में ये प्रॉपर्टी शामिल होती हैं:
  • id: चुने गए आइटम का यूनीक आइडेंटिफ़ायर.
  • mimeType: आइटम का एमआईएमई टाइप.
  • name: आइटम का नाम.
  • url: Drive में आइटम खोलने का यूआरएल.
  • sizeBytes: चुने गए आइटम का साइज़ बाइट में. कोई आइटम अपलोड करने पर, वैल्यू नहीं दिखती.

picker-error इवेंट के लिए, event.detail में गड़बड़ी का ऑब्जेक्ट या गड़बड़ी की जानकारी देने वाली स्ट्रिंग शामिल होती है. उदाहरण के लिए, ERR_USER_NOT_AUTHENTICATED.

उदाहरण

यहां दिए गए कोड के सैंपल में, इस्तेमाल के सामान्य उदाहरणों के लिए Google Picker वेब कॉम्पोनेंट का इस्तेमाल करने का तरीका दिखाया गया है. कोड के हर सैंपल के लिए, इनमें बदलाव करें:

• PROMPT: Google खाते की अनुमति के लिए, उपयोगकर्ता को दिखाने के लिए प्रॉम्प्ट की केस-सेंसिटिव सूची. इसमें हर प्रॉम्प्ट के बीच स्पेस होना चाहिए. ज़्यादा जानकारी के लिए, TokenClientConfig.prompt देखें.

• ORIGIN: पिकर के लिए ऑरिजिन पैरामीटर. उदाहरण के लिए, https://developers.google.com. ज़्यादा जानकारी के लिए, PickerBuilder.setOrigin तरीका देखें.

• APP_ID: Drive ऐप्लिकेशन का आईडी. ज़्यादा जानकारी के लिए, PickerBuilder.setAppId तरीका देखें.

• CLIENT_ID: OAuth 2.0 क्लाइंट आईडी. ज़्यादा जानकारी के लिए, देखें Google API को ऐक्सेस करने के लिए OAuth 2.0 का इस्तेमाल करना.

पीडीएफ़ फ़ाइलें

mime-types एट्रिब्यूट का इस्तेमाल करके, व्यू को फ़िल्टर करें, ताकि सिर्फ़ पीडीएफ़ फ़ाइलें दिखें.

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view mime-types="application/pdf"></drive-picker-docs-view>
</drive-picker>

इमेज और वीडियो फ़ाइलें

mime-types एट्रिब्यूट का इस्तेमाल करके, व्यू को फ़िल्टर करें, ताकि सिर्फ़ इमेज (JPEG, PNG) और वीडियो (MP4, QuickTime) फ़ाइलें दिखें.

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view mime-types="image/jpeg,image/png,video/mp4,video/quicktime"></drive-picker-docs-view>
</drive-picker>

मेरे मालिकाना हक वाली फ़ाइलें

owned-by-me एट्रिब्यूट का इस्तेमाल करके, व्यू को फ़िल्टर करें, ताकि सिर्फ़ मौजूदा उपयोगकर्ता के मालिकाना हक वाली फ़ाइलें दिखें.

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view owned-by-me="true"></drive-picker-docs-view>
</drive-picker>

बिना टाइटल वाली फ़ाइलों के लिए क्वेरी

query एट्रिब्यूट का इस्तेमाल करके, व्यू को फ़िल्टर करें, ताकि खोज क्वेरी "Untitled" से मैच करने वाली फ़ाइलें दिखें.

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view query="Untitled"></drive-picker-docs-view>
</drive-picker>

स्टार के निशान वाली फ़ाइलें

starred एट्रिब्यूट का इस्तेमाल करके, व्यू को फ़िल्टर करें, ताकि सिर्फ़ स्टार के निशान वाली फ़ाइलें दिखें.

<drive-picker
  prompt="PROMPT"
  origin="ORIGIN"
  app-id="APP_ID"
  client-id="CLIENT_ID"
>
  <drive-picker-docs-view starred="true"></drive-picker-docs-view>
</drive-picker>

मिलते-जुलते विषय

• एट्रिब्यूट, इवेंट, और प्रॉपर्टी के बारे में ज़्यादा जानकारी के लिए, GitHub पर पूरा drive-picker-element दस्तावेज़ देखें.