blink-storage について
blink-storage は、アプリのファイルをアップロード、一覧表示、ダウンロード、削除する開発者向けの Blink ストレージ資料です。パス、認証要件、アップロード進捗の扱いを説明します。
主な機能
- 01ファイルをアップロードして公開 URL を取得
- 02パスの接頭辞でファイルを一覧表示
- 03名前を指定してダウンロードリンクを作成
- 04ファイルを単数または複数削除
- 05アップロード進捗を追跡
活用シーン
- 01アバターをアップロードして URL を保存
- 02画像をビジョン AI に渡す
- 03ディレクトリ単位でプロジェクトのファイルを確認
- 04不要になったファイルを削除
MCP 対応
ファイル一覧、公開 CDN URL の取得、削除に使う MCP ツール blink_storage_list、blink_storage_url、blink_storage_delete を説明します。
インストール
コマンドをコピーしてターミナルで実行します。
$
npx skills add https:/ / github.com/ blink-new/ blink-plugin --skill blink-storageインストール後、Claude Code で/blink-storageを入力して読み込まれたか確認します。
詳細
MCP ツール
| ツール | 説明 |
|---|---|
blink_storage_list | 任意のパスプレフィックスを指定して、プロジェクトストレージ内のファイルを一覧表示します |
blink_storage_url | 保存済みファイルの公開 CDN URL を取得します |
blink_storage_delete | ストレージからファイルを削除します |
はじめに
# Upload a file
blink storage upload ./photo.jpg --path uploads/photo.jpg
# List files
blink storage list
# List files in a path
blink storage list uploads/
認証要件
| 操作 | 認証必須 | 備考 |
|---|---|---|
upload() | ❌ いいえ | 追加専用(上書き不可) |
download() | ✅ はい | 署名付き URL |
remove() | ✅ はい | JWT が必要 |
アップロード
const { publicUrl } = await blink.storage.upload(
file,
`uploads/${Date.now()}.${file.name.split('.').pop()}`,
{ onProgress: (percent) => console.log(`${percent}%`) }
)
SDK はコンテンツからファイルタイプを自動検出し、拡張子を修正します。アップロードは追加専用です。同じパスが重複した場合は 409 が返されます。一意性を保つため、タイムスタンプまたはランダム ID を使用してください。
ダウンロード
const { downloadUrl, filename } = await blink.storage.download('images/photo.jpg')
window.open(downloadUrl, '_blank')
// Custom filename
const { downloadUrl } = await blink.storage.download('images/photo.jpg', {
filename: 'my-photo.jpg',
})
削除
await blink.storage.remove('uploads/file1.jpg')
await blink.storage.remove('file1.jpg', 'file2.jpg', 'file3.png') // multiple
よくあるパターン
アバターのアップロード
const handleAvatarUpload = async (file: File) => {
const { publicUrl } = await blink.storage.upload(
file,
`avatars/${user.id}-${Date.now()}.${file.name.split('.').pop()}`
)
await blink.auth.updateMe({ avatar: publicUrl })
return publicUrl
}
進行状況を表示したアップロード
const [progress, setProgress] = useState(0)
const handleUpload = async (file: File) => {
const { publicUrl } = await blink.storage.upload(
file,
`documents/${Date.now()}.${file.name.split('.').pop()}`,
{ onProgress: (percent) => setProgress(percent) }
)
return publicUrl
}
AI 画像入力の場合
最初にアップロードして、拡張子付きの HTTPS URL を取得します。これは AI ビジョンに必要です。
const { publicUrl } = await blink.storage.upload(photo, `photos/${Date.now()}.jpg`)
const { text } = await blink.ai.generateText({
messages: [{ role: "user", content: [
{ type: "text", text: "What's in this image?" },
{ type: "image", image: publicUrl },
]}],
})
URL 形式
アップロードしたファイルは、直接アクセスできる HTTPS URL を返します:https://storage.googleapis.com/{project}/uploads/{filename}.{ext} — 公開アクセス可能で、HTTPS を使用し、ファイル拡張子が付いています。
よくあるエラー
| エラー | 原因 | 解決方法 |
|---|---|---|
| 409 conflict | パスがすでに存在する | タイムスタンプまたはランダム ID を追加します |
| Invalid path | 特殊文字 | サニタイズします:path.replace(/[^a-zA-Z0-9_\-\/\.]/g, '_') |
| File too large | 上限超過 | ファイルを圧縮するか分割します |
コメント
Markdown 対応