این صفحه به‌وسیله ‏Cloud Translation API‏ ترجمه شده است.

از کامپوننت وب Google Picker استفاده کنید

کامپوننت وب Google Picker یک روش اضافی برای ادغام API Google Picker در برنامه‌های وب شما ارائه می‌دهد.

این کامپوننت وب، ادغام انتخاب فایل گوگل درایو را در برنامه‌های وب شما ساده می‌کند. این کامپوننت تمام منطق بارگذاری و احراز هویت API پیش‌فرض را در یک عنصر HTML واحد قرار می‌دهد. به شما امکان می‌دهد بدون نیاز به نوشتن منطق بارگذاری gapi ، یک تگ <drive-picker> را مستقیماً در کد خود قرار دهید. این کامپوننت می‌تواند در HTML ساده و جاوا اسکریپت استفاده شود و همچنین مستقل از چارچوب است و به طور یکپارچه با Svelte، Vue، Angular و موارد دیگر کار می‌کند.

برای اطلاعات بیشتر در مورد کتابخانه کامپوننت وب، به @googleworkspace/drive-picker-element مراجعه کنید.

برای برنامه‌های React، از پکیج رسمی React wrapper کامپوننت وب استفاده کنید: @googleworkspace/drive-picker-react .

ویژگی‌های کلیدی

ادغام ساده: با چند خط کد، Google Picker را به برنامه‌های وب خود اضافه کنید.
مستقل از چارچوب: به طور یکپارچه با هر چارچوب وب انتخابی شما (React، Vue، Angular و غیره) کار می‌کند.
متن‌باز و قابل تنظیم: کد به صورت رایگان در دسترس است و می‌توانید آن را متناسب با نیازهای خاص خود تنظیم کنید.
پشتیبانی یکپارچه از OAuth: احراز هویت کاربر را به طور خودکار انجام می‌دهد و یک تجربه کاربری روان را ارائه می‌دهد.
نماهای قابل تنظیم: با تنظیم ویژگی‌ها، Google Picker را طوری پیکربندی کنید که فقط انواع فایل‌ها یا نماهای مورد نیاز شما را نمایش دهد.

شروع کنید

کامپوننت را با استفاده از NPM یا مشابه آن نصب کنید:
```
npm i @googleworkspace/drive-picker-element
```
نسخه CDN نیز موجود است. برای فرمت‌ها و نسخه‌های موجود، به 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";
```
اگر از نسخه CDN استفاده می‌کنید، نیازی به وارد کردن نیست، زیرا به طور خودکار کتابخانه Google Picker و کتابخانه کلاینت Google API که برای احراز هویت استفاده می‌شود را بارگذاری می‌کند.
عناصر سفارشی را به فایل 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`	زمانی اجرا می‌شود که کاربر با کلیک روی دکمه‌ی لغو یا بستن پنجره‌ی محاوره‌ای بدون انتخاب، انتخاب را لغو کند.
`picker-error`	زمانی اجرا می‌شود که هنگام مقداردهی اولیه یا انتخاب فایل، خطایی رخ دهد.

برای اطلاعات بیشتر در مورد رویدادها، به مستندات @googleworkspace/drive-picker-element در NPM مراجعه کنید.

جزئیات رویداد

برای رویداد 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 : نوع MIME آیتم.
- name : نام کالا.
- url : آدرس اینترنتی (URL) برای باز کردن آیتم در درایو.
- sizeBytes : اندازه آیتم انتخاب شده بر حسب بایت. این مقدار هنگام آپلود آیتم برگردانده نمی‌شود.

برای رویداد picker-error ، event.detail شامل یک شیء خطا یا رشته‌ای است که شکست را توصیف می‌کند (برای مثال، ERR_USER_NOT_AUTHENTICATED ).

مثال‌ها

نمونه‌های کد زیر نحوه استفاده از کامپوننت وب Google Picker را برای موارد استفاده رایج نشان می‌دهد. برای هر نمونه کد، موارد زیر را جایگزین کنید:

PROMPT : فهرستی از درخواست‌های احراز هویت حساب گوگل که با فاصله از هم جدا شده و به حروف کوچک و بزرگ حساس است، برای نمایش به کاربر. برای اطلاعات بیشتر، به TokenClientConfig.prompt مراجعه کنید.
ORIGIN : پارامتر مبدا برای انتخابگر. برای مثال، https://developers.google.com . برای اطلاعات بیشتر، به متد PickerBuilder.setOrigin مراجعه کنید.
APP_ID : شناسه برنامه Drive. برای اطلاعات بیشتر، به متد PickerBuilder.setAppId مراجعه کنید.
CLIENT_ID : شناسه کلاینت OAuth 2.0. برای اطلاعات بیشتر، به بخش «استفاده از OAuth 2.0 برای دسترسی به APIهای گوگل» مراجعه کنید.

فایل‌های پی‌دی‌اف

با استفاده از ویژگی mime-types نما را فیلتر می‌کند تا فقط فایل‌های PDF نمایش داده شوند.

<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 در GitHub مراجعه کنید.

از کامپوننت وب Google Picker استفاده کنید با مجموعه‌ها، منظم بمانید ذخیره و طبقه‌بندی محتوا براساس اولویت‌های شما.