ユーザーがアップロードした画像を受け付ける

Cloudflare Images の Direct Creator Upload を使うと、API キーやトークンをクライアントへ公開せずに、ワンタイムのアップロード URL でユーザーが画像をアップロードできます。Direct Creator Upload を使うと、中間のストレージバケットも不要になり、それに伴うストレージと egress のコストも発生しません。

Direct Creator Upload のワークフローでは、webhooks を設定して通知を受け取れます。

ワンタイムアップロード URL をリクエストする

次の例を参考に、direct_upload エンドポイントへ POST リクエストを送ります。

curl --request POST \
https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v2/direct_upload \
--header "Authorization: Bearer <API_TOKEN>" \
--form 'requireSignedURLs=true' \
--form 'metadata={"key":"value"}'

リクエストが成功すると、次のようなレスポンスを受け取ります。id フィールドは、作成者がこれからアップロードする画像の識別子です。

{
	"result": {
		"id": "2cdc28f0-017a-49c4-9ed7-87056c83901",
		"uploadURL": "https://upload.imagedelivery.net/Vi7wi5KSItxGFsWRG2Us6Q/2cdc28f0-017a-49c4-9ed7-87056c83901"
	},
	"result_info": null,
	"success": true,
	"errors": [],
	"messages": []
}

エンドポイントを呼び出すと、下書きの画像レコードが作成されます。ただし、画像は一覧には表示されません。画像レコードの状態を確認するには、ワンタイムアップロード URL に対して direct_upload エンドポイントでリクエストできます。

画像レコードの状態を確認する

新しい下書き画像レコードの状態を確認するには、次の例のようにワンタイムアップロード URL を使います。

curl https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1/{image_id} \
--header "Authorization: Bearer <API_TOKEN>"

リクエストが成功すると、次のようなレスポンスを受け取ります。作成者が画像をアップロードするまで、draft フィールドは true です。画像がアップロードされると、draft フィールドは削除されます。

{
	"result": {
		"id": "2cdc28f0-017a-49c4-9ed7-87056c83901",
		"metadata": {
			"key": "value"
		},
		"uploaded": "2022-01-31T16:39:28.458Z",
		"requireSignedURLs": true,
		"variants": [
			"https://imagedelivery.net/Vi7wi5KSItxGFsWRG2Us6Q/2cdc28f0-017a-49c4-9ed7-87056c83901/public",
			"https://imagedelivery.net/Vi7wi5KSItxGFsWRG2Us6Q/2cdc28f0-017a-49c4-9ed7-87056c83901/thumbnail"
		],
		"draft": true
	},
	"success": true,
	"errors": [],
	"messages": []
}

バックエンドのエンドポイントは、クライアントへ uploadURL プロパティを返します。クライアントはこの URL で、認証情報を付けずに画像をアップロードします。

次は、ワンタイムアップロード URL を受け取り、ユーザーが選んだ画像をアップロードする HTML ページの例です。

<!DOCTYPE html>
<html>
	<body>
		<form
			action="INSERT_UPLOAD_URL_HERE"
			method="post"
			enctype="multipart/form-data"
		>
			<input type="file" id="myFile" name="file" />
			<input type="submit" />
		</form>
	</body>
</html>

デフォルトでは、未使用の uploadURL は 30 分で期限切れになります。この動作を上書きするには、cURL コマンドに次の引数を追加します。

--data '{"expiry":"2021-09-14T16:00:00Z"}'

有効期限は、現時点から最短 2 分、最長 6 時間先である必要があります。

カスタム ID 付きの Direct Creator Upload

ワンタイムアップロード URL の最初のリクエスト時に、自動生成 ID の代わりにカスタム ID を指定できます。カスタム ID を付けた画像は、署名付き URL トークン機能（--requireSignedURLs=true）で非公開にはできません。

カスタム ID を指定するには、次の例のように、名前が ID のフォームフィールドと対応するカスタム ID 値を渡します。

--form 'id=this/is/my-customid'