এই পৃষ্ঠাটি Cloud Translation API অনুবাদ করেছে।

Google Picker ওয়েব কম্পোনেন্ট ব্যবহার করুন

গুগল পিকার ওয়েব কম্পোনেন্ট আপনার ওয়েব অ্যাপে গুগল পিকার এপিআই সংহত করার একটি অতিরিক্ত উপায় প্রদান করে।

এই ওয়েব কম্পোনেন্টটি আপনার ওয়েব অ্যাপে গুগল ড্রাইভ ফাইল সিলেকশন ইন্টিগ্রেট করাকে সহজ করে তোলে। এটি এপিআই লোডিং এবং অথেনটিকেশনের সমস্ত গতানুগতিক লজিককে একটিমাত্র এইচটিএমএল এলিমেন্টের মধ্যে আবদ্ধ করে। এর ফলে আপনি gapi লোডিং লজিক লেখার প্রয়োজন ছাড়াই সরাসরি আপনার কোডে একটি <drive-picker> ট্যাগ যুক্ত করতে পারেন। এটি সাধারণ এইচটিএমএল এবং জাভাস্ক্রিপ্টে ব্যবহার করা যায় এবং এটি ফ্রেমওয়ার্ক-নিরপেক্ষ হওয়ায় Svelte, Vue, Angular ও আরও অনেক ফ্রেমওয়ার্কের সাথে নির্বিঘ্নে কাজ করে।

ওয়েব কম্পোনেন্ট লাইব্রেরি সম্পর্কে আরও তথ্যের জন্য, @googleworkspace/drive-picker-element দেখুন।

React অ্যাপের জন্য, ওয়েব কম্পোনেন্টটির অফিশিয়াল React র‍্যাপার প্যাকেজ ব্যবহার করুন: @googleworkspace/drive-picker-react ।

মূল বৈশিষ্ট্য

সহজ সংযোজন: মাত্র কয়েকটি কোডের লাইনেই আপনার ওয়েব অ্যাপে গুগল পিকার যোগ করুন।
ফ্রেমওয়ার্ক নিরপেক্ষ: আপনার পছন্দের যেকোনো ওয়েব ফ্রেমওয়ার্কের (যেমন React, Vue, Angular ইত্যাদি) সাথে এটি নির্বিঘ্নে কাজ করে।
ওপেন সোর্স এবং কাস্টমাইজযোগ্য: কোডটি বিনামূল্যে পাওয়া যায় এবং আপনি আপনার নির্দিষ্ট প্রয়োজন অনুযায়ী এটি কাস্টমাইজ করতে পারেন।
নির্বিঘ্ন OAuth সমর্থন: ব্যবহারকারীর প্রমাণীকরণ স্বয়ংক্রিয়ভাবে সম্পন্ন করে, যা একটি মসৃণ ব্যবহারকারী অভিজ্ঞতা প্রদান করে।
কাস্টমাইজযোগ্য ভিউ: অ্যাট্রিবিউট সেট করার মাধ্যমে গুগল পিকারকে কনফিগার করে শুধুমাত্র আপনার প্রয়োজনীয় ফাইলের ধরন বা ভিউগুলো প্রদর্শন করুন।

শুরু করুন

NPM বা অনুরূপ কিছু ব্যবহার করে কম্পোনেন্টটি ইনস্টল করুন:
```
npm i @googleworkspace/drive-picker-element
```
একটি সিডিএন সংস্করণও উপলব্ধ আছে। উপলব্ধ ফরম্যাট ও সংস্করণগুলির জন্য, unpkg দেখুন।
```
<script src="https://unpkg.com/@googleworkspace/drive-picker-element@latest/dist/index.iife.min.js"></script>
```
আপনার জাভাস্ক্রিপ্ট ফাইলে @googleworkspace/drive-picker-element কম্পোনেন্টগুলো ইম্পোর্ট করুন:
```
import "@googleworkspace/drive-picker-element";
```
আপনি যদি সিডিএন সংস্করণ ব্যবহার করেন, তাহলে ইম্পোর্ট করার প্রয়োজন নেই, কারণ এটি স্বয়ংক্রিয়ভাবে গুগল পিকার লাইব্রেরি এবং প্রমাণীকরণের জন্য ব্যবহৃত গুগল এপিআই ক্লায়েন্ট লাইব্রেরি লোড করে নেয়।
আপনার HTML ফাইলে কাস্টম এলিমেন্টগুলো যোগ করুন:
```
<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`	ব্যবহারকারী যখন Cancel বোতামে ক্লিক করে নির্বাচন বাতিল করেন অথবা কোনো নির্বাচন না করেই ডায়ালগটি বন্ধ করেন, তখন এটি কার্যকর হয়।
`picker-error`	প্রারম্ভিককরণ বা ফাইল নির্বাচনের সময় কোনো ত্রুটি ঘটলে এটি সক্রিয় হয়।

ইভেন্ট সম্পর্কে আরও তথ্যের জন্য, NPM-এ @googleworkspace/drive-picker-element ডকুমেন্টেশন দেখুন।

অনুষ্ঠানের বিবরণ

picker-picked ইভেন্টের ক্ষেত্রে, ইভেন্টের বিবরণে সম্পূর্ণ গুগল পিকার 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 : আইটেমটির MIME টাইপ।
- name : আইটেমটির নাম।
- url : ড্রাইভে আইটেমটি খোলার জন্য URL।
- sizeBytes : নির্বাচিত আইটেমটির আকার, বাইটে। কোনো আইটেম আপলোড করা হলে এই মানটি ফেরত দেওয়া হয় না।

picker-error ইভেন্টের ক্ষেত্রে, event.detail একটি এরর অবজেক্ট বা স্ট্রিং থাকে যা ব্যর্থতার বর্ণনা দেয় (উদাহরণস্বরূপ, ERR_USER_NOT_AUTHENTICATED )।

উদাহরণ

নিম্নলিখিত কোড নমুনাগুলি দেখায় কিভাবে সাধারণ ব্যবহারের ক্ষেত্রে গুগল পিকার ওয়েব কম্পোনেন্ট ব্যবহার করতে হয়। প্রতিটি কোড নমুনার জন্য, নিম্নলিখিতগুলি প্রতিস্থাপন করুন:

PROMPT : ব্যবহারকারীকে দেখানোর জন্য গুগল অ্যাকাউন্ট অনুমোদনের প্রম্পটগুলোর একটি তালিকা, যা স্পেস দিয়ে আলাদা করা এবং কেস-সেনসিটিভ। আরও তথ্যের জন্য, TokenClientConfig.prompt দেখুন।
ORIGIN : পিকারের জন্য উৎস প্যারামিটার। উদাহরণস্বরূপ, https://developers.google.com । আরও তথ্যের জন্য, PickerBuilder.setOrigin মেথডটি দেখুন।
APP_ID : ড্রাইভ অ্যাপ আইডি। আরও তথ্যের জন্য, PickerBuilder.setAppId পদ্ধতিটি দেখুন।
CLIENT_ID : OAuth 2.0 ক্লায়েন্ট আইডি। আরও তথ্যের জন্য, "Using OAuth 2.0 to Access Google APIs " দেখুন।

পিডিএফ ফাইল

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>

অ্যাট্রিবিউট, ইভেন্ট এবং প্রপার্টি সম্পর্কে বিস্তারিত তথ্যের জন্য, গিটহাবে drive-picker-element সম্পূর্ণ ডকুমেন্টেশন দেখুন।