ERR_CONNECTION_RESET - Direct Creator Upload using TUS

Hi community,
I have a NextJs (13, app directory) project and I’m trying to setup the Direct Creator Upload process through TUS in DOCS say.

After reading lots of tickets regarding the same and applying many changes I keep receiving errors when trying to upload a simple 3Mb .mov video file.
I tried as well the codepen prepared to test directly with the endpoint to the api but it won’t work neither. It returns exactly the same error as my application.

I attach the errors I see on the navigator console.

// Api endpoint file /api/video-upload/route.ts
export async function POST(req: NextRequest) {
  const searchParams = req.nextUrl.searchParams;
  const queryFilename = searchParams.get("filename");
 
  const apiUrl = getCloudflareVideoUploadUrl({
    params: {
      accountId: process.env.NEXT_PUBLIC_CLOUDFLARE_ACCOUNT_ID,
    },
  });

  //apiUrl -->  https://api.cloudflare.com/client/v4/accounts/:accountId/stream?direct_user=true
  // with :accountId  as my cloudflare account id
  
  const response = await fetch(apiUrl, {
    method: "POST",
    headers: {
      Authorization: `Bearer ${process.env.NEXT_PUBLIC_CLOUDFLARE_API_TOKEN}`,
      "Tus-Resumable": "1.0.0",
      "Upload-Length": req.headers.get("Upload-Length") as string,
      "Upload-Metadata": JSON.stringify({
        name: queryFilename,
      }),
    },
  });


  const destination = response.headers.get("Location") as string;
  
  return new Response(null, {
    headers: {
      "Access-Control-Expose-Headers": "Location",
      "Access-Control-Allow-Headers": "*",
      "Access-Control-Allow-Origin": "*",
      Location: destination,
    },
  });
}
// part of the method that uses the endpoint above and where the upload process takes part
      let fileName = asset.file.name;
      const fileExtension = fileName.match(/\.([0-9a-z]+)$/i)?.[1];
      fileName = `${crypto.randomUUID()}.${fileExtension}`;

      // Initiate TUS upload
      const upload = new tus.Upload(asset.file, {

        endpoint: `/api/cloudflare/video-upload?filename=${asset?.file.name}`,
        retryDelays: [0, 1000, 3000, 5000],
        metadata: {
          name: fileName as string,
          filename: fileName as string,
          filetype: asset.file.type,
        },
        onError: (error) => {
          console.log("Failed to upload", error);

        },
        onProgress: (bytesUploaded: number, bytesTotal: number) => {
          const percentage = ((bytesUploaded / bytesTotal) * 100).toFixed(2);
          console.log(`${percentage}% Uploaded`);
        },
        onSuccess: async () => {
          console.log("Upload complete ", upload.url);
          

        },
      });

      upload.findPreviousUploads().then(function (previousUploads) {
        // Found previous uploads so we select the first one.
        if (previousUploads.length) {
          upload.resumeFromPreviousUpload(previousUploads[0]);
        }

        // Start the upload
        upload.start();
      });

I checked my tokenId had the permissions it needs to read/write streams and in fact if I try to upload a video through command line using the CURL method on Basic upload flow, for small videos it works.

Hope someone can enlighten me a little bit. Thank you in advance :purple_heart:

1 Like

Still waiting for someone to help with this issue :frowning:

I have the same isssue. Could you find a solution for that?
Here is my topic: link