From fe473b3c0e75c1647479eb160609278ae3b1293e Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Fri, 27 Feb 2026 13:21:14 +0000 Subject: [PATCH 1/2] [Stream] Add sequence diagram and improve DCU + tus protocol documentation --- .../direct-creator-uploads.mdx | 32 ++++++++++++++++--- 1 file changed, 28 insertions(+), 4 deletions(-) diff --git a/src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx b/src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx index 62d120db284..2ad233573c9 100644 --- a/src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx +++ b/src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx @@ -81,11 +81,33 @@ the upload constraints defined at time of creation or is larger than 200 MB in s If your end user's video is over 200 MB, you must use the tus protocol. Even if the file is under 200 MB, if the end user's connection is potentially unreliable, Cloudflare recommends using the tus protocol because it is resumable. For detailed information about tus protocol requirements, additional client examples, and upload options, refer to [Resumable and large files (tus)](/stream/uploading-videos/resumable-uploads/). -To enable direct creator uploads with the tus protocol: +The following diagram shows how the two steps of this process interact: -1. Create your own API endpoint that returns an upload URL. +```mermaid +sequenceDiagram +accTitle: Direct Creator Uploads with tus sequence diagram +accDescr: Shows the two-step flow where a backend provisions a tus upload URL and the end user uploads directly to Stream + +participant U as End user +participant B as Your backend +participant S as Cloudflare Stream + +U->>B: Initiates upload request +B->>S: Requests tus upload URL (authenticated) +S->>B: Returns one-time upload URL +B->>U: Returns one-time upload URL +U->>S: Uploads video directly using tus +``` + +### Step 1: Your backend provisions a one-time upload URL + +:::note -The example below shows how to build a Worker to get a URL your end users can use to upload their video. The one-time upload URL is returned in the `Location` header of the response, not in the response body. +Before provisioning the one-time upload URL, your backend must obtain the file size from the end user. The tus protocol requires the `Upload-Length` header when creating the upload endpoint. In a browser, you can get the file size from the selected file's `.size` property (for example, `fileInput.files[0].size`). + +::: + +The example below shows how to build a Worker that returns a one-time upload URL to your end users. The one-time upload URL is returned in the `Location` header of the response, not in the response body. ```javascript {23} title="Example API endpoint" export async function onRequest(context) { @@ -116,7 +138,9 @@ export async function onRequest(context) { } ``` -2. Use this API endpoint **directly** in your tus client. A common mistake is to extract the upload URL from your new API endpoint, and use this directly. See below for a complete example of how to use the API from Step 1 with the uppy tus client. +### Step 2: Your end user's client uploads directly to Stream + +Use your backend endpoint directly in your tus client. See below for a complete example of how to use the backend from Step 1 with the uppy tus client. ```html {35} title="Upload a video using the uppy tus client" From 1e7a1b0f1f575794a02952d6438ea3b7f0ae2710 Mon Sep 17 00:00:00 2001 From: ToriLindsay Date: Thu, 5 Mar 2026 15:38:13 +0000 Subject: [PATCH 2/2] Update src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx Co-authored-by: Jun Lee --- .../docs/stream/uploading-videos/direct-creator-uploads.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx b/src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx index 2ad233573c9..95137020540 100644 --- a/src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx +++ b/src/content/docs/stream/uploading-videos/direct-creator-uploads.mdx @@ -140,7 +140,7 @@ export async function onRequest(context) { ### Step 2: Your end user's client uploads directly to Stream -Use your backend endpoint directly in your tus client. See below for a complete example of how to use the backend from Step 1 with the uppy tus client. +Use your backend endpoint directly in your tus client. Refer to the below example for a complete demonstration of how to use the backend from Step 1 with the uppy tus client. ```html {35} title="Upload a video using the uppy tus client"