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	इस इवेंट को तब ट्रिगर किया जाता है, जब फ़ाइल चुनने या उसे शुरू करने के दौरान कोई गड़बड़ी होती है.

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

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

picker-picked इवेंट के लिए, इवेंट की ज़्यादा जानकारी में पूरा 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 क्लाइंट आईडी. ज़्यादा जानकारी के लिए, OAuth 2.0 का इस्तेमाल करके, Google API को ऐक्सेस करना लेख पढ़ें.

PDF फ़ाइलें

इस फ़िल्टर से, सिर्फ़ PDF फ़ाइलें दिखती हैं. इसके लिए, 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>

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

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

<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>

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

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

<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 दस्तावेज़ पढ़ें.