$npx -y skills add TencentCloudBase/cloudbase-skills --skill cloud-storage-webComplete guide for CloudBase cloud storage using Web SDK (@cloudbase/js-sdk) - upload, download, temporary URLs, file management, and best practices.
| 1 | ## Standalone Install Note |
| 2 | |
| 3 | If this environment only installed the current skill, start from the CloudBase main entry and use the published `cloudbase/references/...` paths for sibling skills. |
| 4 | |
| 5 | - CloudBase main entry: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/SKILL.md` |
| 6 | - Current skill raw source: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloud-storage-web/SKILL.md` |
| 7 | |
| 8 | Keep local `references/...` paths for files that ship with the current skill directory. When this file points to a sibling skill such as `auth-tool` or `web-development`, use the standalone fallback URL shown next to that reference. |
| 9 | |
| 10 | # Cloud Storage Web SDK |
| 11 | |
| 12 | ## Activation Contract |
| 13 | |
| 14 | ### Use this first when |
| 15 | |
| 16 | - A browser or Web app must upload, download, or manage CloudBase storage objects through `@cloudbase/js-sdk`. |
| 17 | - The request mentions `uploadFile`, `getTempFileURL`, `deleteFile`, or `downloadFile` in frontend code. |
| 18 | |
| 19 | ### Read before writing code if |
| 20 | |
| 21 | - The task is browser-side storage work but you still need to separate it from Mini Program storage, backend storage management, or static hosting deployment. |
| 22 | - The request may be blocked by security domains or frontend auth. |
| 23 | |
| 24 | ### Then also read |
| 25 | |
| 26 | - Web login and identity -> `../auth-web/SKILL.md` (standalone fallback: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/auth-web/SKILL.md`) |
| 27 | - General Web app setup -> `../web-development/SKILL.md` (standalone fallback: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/web-development/SKILL.md`) |
| 28 | - Direct storage management through MCP tools -> `../cloudbase-platform/SKILL.md` (standalone fallback: `https://cnb.cool/tencent/cloud/cloudbase/cloudbase-skills/-/git/raw/main/skills/cloudbase/references/cloudbase-platform/SKILL.md`) |
| 29 | |
| 30 | ### Do NOT use for |
| 31 | |
| 32 | - Mini Program file APIs. |
| 33 | - Backend or agent-side direct storage management through MCP. |
| 34 | - Static website hosting deployment via `manageHosting(action="upload")`. |
| 35 | - Database operations. |
| 36 | |
| 37 | ### Common mistakes / gotchas |
| 38 | |
| 39 | - Uploading from browser code without configuring security domains. |
| 40 | - Using this skill for static hosting instead of storage objects. |
| 41 | - Mixing browser SDK upload flows with server-side file-management tasks. |
| 42 | - Assuming temporary download URLs are permanent links. |
| 43 | - Ignoring `STORAGE_NOT_EXIST`; it means the target storage bucket/resource is not ready, not that the browser upload code should fabricate a URL. |
| 44 | - On local Vite or dev-server tasks, forgetting to whitelist the exact current browser `host:port` before testing `app.uploadFile()`. |
| 45 | - Treating CloudBase PG / `pgstore` like the legacy NoSQL CloudBase storage. PG environments use a separate `pgstore` backend whose buckets are NOT auto-created from your old NoSQL bucket. If `pgstore` has no bucket, every upload returns `STORAGE_BUCKET_NOT_FOUND` and the SDK then issues `PUT https://undefined/` (visible in DevTools as `net::ERR_NAME_NOT_RESOLVED`). Treat bucket existence as a hard prerequisite, just like Supabase: in Supabase Storage every upload must target an already-created bucket; CloudBase PG follows the same model. |
| 46 | |
| 47 | ### Minimal checklist |
| 48 | |
| 49 | - Confirm the caller is a browser/Web app. |
| 50 | - Initialize the Web SDK once. |
| 51 | - Confirm CloudBase storage exists in the current environment before testing upload. Use available MCP management/query tools to inspect or create/select the storage bucket when the environment has no default bucket. **In a PG / pgstore environment, the legacy NoSQL bucket from `DescribeEnvs` does NOT count as a usable pgstore bucket; create one explicitly before any browser upload. The legacy NoSQL bucket itself is still fine for legacy `app.uploadFile()` flows that already target it — PG and NoSQL storage coexist; this skill applies to BOTH.** |
| 52 | - Check security-domain/CORS requirements. |
| 53 | - Pick the right storage method before coding. |
| 54 | |
| 55 | ### Local dev recipe |
| 56 | |
| 57 | When the app runs on a local browser origin and must upload files from the frontend: |
| 58 | |
| 59 | 1. Use `envQuery` with `action="domains"` to inspect the current security-domain whitelist. |
| 60 | 2. Convert the browser origin into the CloudBase whitelist entry format: |
| 61 | - Browser origin `http://127.0.0.1:4173` -> whitelist entry `127.0.0.1:4173` |
| 62 | - Browser origin `http://localhost:5173` -> whitelist entry `localhost:5173` |
| 63 | 3. If the exact current host entry is missing, call `envDomainManagement` with `action="create"` and add that host entry before relying on `app.uploadFile()`. |
| 64 | 4. If the runtime port may change between runs, do not assume any fixed default port list is sufficient. Re-check the actual browser origin you are really using for testing or final val |