Package Reference - @wordpress/media-utils - 《WordPress開発者リソース》日本語

インストール
API
使用法
- uploadMedia
- メディアアップロード
このパッケージへの貢献

インストール

モジュールをインストールします

npm install @wordpress/media-utils --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。そのような言語機能やAPIのサポートが限られているか、まったくない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含める必要があります。

API

添付ファイル

文書化されていない宣言です。

メディアアップロード

文書化されていない宣言です。

RestAttachment

文書化されていない宣言です。

transformAttachment

REST APIの形状からブロックエディタや他の消費者が期待する形状に添付ファイルオブジェクトを変換します。

パラメータ

attachment RestAttachment: REST APIの添付ファイルオブジェクト。

uploadMedia

ファイルアップロードボタンがアクティブになったとき、またはドラッグ＆ドロップでエディタにファイルを追加するときにメディアファイルをアップロードします。

パラメータ

$0 UploadMediaArgs: 関数に渡されるパラメータオブジェクト。
$0.allowedTypes UploadMediaArgs[ 'allowedTypes' ]: アップロード可能なメディアのタイプの配列。未設定の場合はすべてのタイプが許可されます。
$0.additionalData UploadMediaArgs[ 'additionalData' ]: リクエストに含める追加データ。
$0.filesList UploadMediaArgs[ 'filesList' ]: ファイルのリスト。
$0.maxUploadFileSize UploadMediaArgs[ 'maxUploadFileSize' ]: サイトで許可される最大アップロードサイズ（バイト単位）。
$0.onError UploadMediaArgs[ 'onError' ]: エラーが発生したときに呼び出される関数。
$0.onFileChange UploadMediaArgs[ 'onFileChange' ]: ファイルまたはファイルの一時的な表現が利用可能になるたびに呼び出される関数。
$0.wpAllowedMimeTypes UploadMediaArgs[ 'wpAllowedMimeTypes' ]: 許可されているMIMEタイプとファイル拡張子のリスト。
$0.signal UploadMediaArgs[ 'signal' ]: 中止信号。

validateFileSize

ファイルがサイトのファイルアップロードサイズ制限内にあるかどうかを確認します。

パラメータ

file File: ファイルオブジェクト。
maxUploadFileSize number: サイトで許可される最大アップロードサイズ（バイト単位）。

validateMimeType

呼び出し元（例：ブロック）がこのMIMEタイプをサポートしているかどうかを確認します。

パラメータ

file File: ファイルオブジェクト。
allowedTypes string[]: 許可されているMIMEタイプのリスト。

validateMimeTypeForUser

ユーザーがこのMIMEタイプをアップロードすることが許可されているかどうかを確認します。

パラメータ

file File: ファイルオブジェクト。
wpAllowedMimeTypes Record< string, string > | null: 許可されているMIMEタイプとファイル拡張子のリスト。

使用法

uploadMedia

メディアアップロードユーティリティは、呼び出し元がWordPressメディアライブラリにファイルをアップロードできるようにする関数です。

例として、myFilesがファイルオブジェクトの配列であり、handleFileChangeがonFileChangeでファイルの説明を含むオブジェクトの配列を受け取る関数であり、handleFileErrorが可能なエラーを説明するオブジェクトを受け取る関数である場合、次のコードはファイルをWordPressメディアライブラリにアップロードします：

wp.mediaUtils.utils.uploadMedia( {
   filesList: myFiles,
   onFileChange: handleFileChange,
   onError: handleFileError,
} );

次のコードは、foo.txtという名前のファイルをfooという内容でメディアライブラリにアップロードし、そのURLをアラートします：

wp.mediaUtils.utils.uploadMedia( {
   filesList: [ new File( [ 'foo' ], 'foo.txt', { type: 'text/plain' } ) ],
   onFileChange: ( [ fileObj ] ) => alert( fileObj.url ),
   onError: console.error,
} );

最初にonFileChangeが一時的なblob URLで呼び出され、その後最終的なURLで呼び出されることに注意してください。これにより、アップロードが完了したかのように楽観的なUIで結果を表示できます。例えば、画像をアップロードする際には、アップロードが完了する前にUIに画像をすぐに表示できます。

メディアアップロード

メディアアップロードコンポーネントは、ユーザーがWordPressメディアライブラリを開くことを可能にするUIボタンを提供します。通常、フィルターeditor.MediaUploadと一緒に使用されます。

このコンポーネントは、https://github.com/WordPress/gutenberg/blob/HEAD/packages/block-editor/src/components/media-upload/README.mdに指定されたインターフェースに従い、その使用に関する詳細はそこに確認できます。

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。