FormFileUpload

使用法

import { FormFileUpload } from '@wordpress/components';
const MyFormFileUpload = () => (
   <FormFileUpload
   accept="image/*"
   onChange={ ( event ) => console.log( event.currentTarget.files ) }
   >
   Upload
   </FormFileUpload>
);

プロパティ

コンポーネントは以下のプロパティを受け入れます。このセットに含まれていないプロパティは、Button コンポーネントに渡されます。

accept

ユーザーがアップロードできるファイルタイプをブラウザに伝えるために、input 要素に渡される文字列です。例: image/*,video/*。

この文字列に関する詳細情報は、https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#Unique_file_type_specifiers で入手できます。

• タイプ: String
• 必須: いいえ
  

children

子要素は Button の子要素として渡されます。

• タイプ: Boolean
• 必須: いいえ
  

icon

レンダリングするアイコン。サポートされている値は、Dashicons（文字列として指定）、関数、コンポーネントインスタンス、および null です。

• タイプ: String|Function|Component|null
• 必須: いいえ
• デフォルト: null
  

multiple

ファイルの複数選択を許可するかどうか。

• タイプ: Boolean
• 必須: いいえ
• デフォルト: false
  

onChange

input ファイル要素に直接渡されるコールバック関数。

選択されたファイルは event.currentTarget.files で利用可能です。

• タイプ: Function
• 必須: はい
  

onClick

input ファイル要素に直接渡されるコールバック関数。

これは、ユーザーが同じファイルを再度選択したときに change イベントを強制的に発火させたい場合に便利です。これを行うには、onClick 関数内でターゲット値を空の文字列に設定します。

<FormFileUpload
   onClick={ ( event ) => ( event.target.value = '' ) }
   onChange={ onChange }
>
   Upload
</FormFileUpload>

• タイプ: Function
• 必須: いいえ
  

render

UIをレンダリングするために使用されるオプションのコールバック関数。渡された場合、コンポーネントはデフォルトのUI（ボタン）をレンダリングせず、この関数を呼び出してレンダリングします。この関数は、openFileDialog プロパティを持つオブジェクトを受け取り、呼び出されるとブラウザのネイティブファイルアップロードモーダルウィンドウを開く関数です。

• タイプ: Function
• 必須: いいえ
  

__next40pxDefaultSize

将来のバージョンでデフォルトサイズとなる大きなデフォルト高さを選択し始めます。

• タイプ: Boolean
• 必須: いいえ
• デフォルト: false