Complex Issue with TUS Resumable Uploads and Cloudflare Stream in a Laravel + Vue 3

Hello Cloudflare Community,

I’m encountering a persistent and complex issue with implementing TUS resumable uploads in a Laravel (v11) backend with a Vue.js frontend utilizing Inertia.js. Despite following multiple approaches, including using a setup similar to a working example from a Cloudflare supporter, I’ve hit a roadblock, primarily with CORS errors and method handling.

Current Error: [Uppy] [10:17:30] tus: unexpected response while creating upload, originated from request (method: POST, url: /api/media/direct-upload-url, response code: 405, response text: Only HEAD and PATCH requests allowed at this endpoint. Please refer to TUS protocol specification at https://tus.io/, request id: n/a)

Setup Details:

  • Backend: Laravel 11
  • Frontend: Vue.js with Inertia.js
  • Usage: Attempting to use TUS for resumable uploads directly to Cloudflare Stream using generated direct upload URLs.

Current Implementation: My current setup involves generating a direct upload URL from Cloudflare via my Laravel backend and attempting to use this URL in the Uppy.js frontend configured with the TUS protocol. Below are snippets of the core components involved:

Vue.js Frontend (Create.Vue):

<template>
    <div>
        <Dashboard v-if="uppyInstance" :uppy="uppyInstance" />
    </div>
</template>

<script>
import Uppy from '@uppy/core';
import Tus from '@uppy/tus';
import axios from 'axios';

export default {
    setup() {
        const uppy = new Uppy({ debug: true, autoProceed: true });

        async function setupUploader() {
            const res = await axios.get('/api/media/direct-upload-url');
            uppy.use(Tus, { endpoint: res.data.original.Location });
        }

        onMounted(setupUploader);
        return { uppyInstance: uppy };
    }
};
</script>

Laravel Backend (API, Controller & Service):

Route::post('/media/direct-upload-url', [VideoController::class, 'getDirectUploadUrl']);

public function getDirectUploadUrl()
    {
        try {
            //$uploadUrl = $this->cloudflareStreamService->generateDirectUploadUrl();

            //logger('Direct upload URL generated', $uploadUrl);
            //logger('Location: ' . $uploadUrl['Location']);

            return response(null, 200)
                ->header('Access-Control-Allow-Origin', '*')
                ->header('Access-Control-Allow-Headers', '*')
                ->header('Access-Control-Expose-Headers', 'Location')
                ->header('X-HTTP-Method-Override', 'PATCH')
                ->header('Location', 'https://upload.videodelivery.net/tus/b4ed76e7ec395237eb79872aea9e174a?tusv2=true');
        } catch (\Exception $e) {
            return response()->json(['error' => $e->getMessage()], 500);
        }
    }

public function generateDirectUploadUrl() 
    {
        logger('Generating direct upload URL');

        $endpoint = "https://api.cloudflare.com/client/v4/accounts/{$this->accountId}/stream?direct_user=true";

        $uploadLength = '1800';
        $uploadMetadata = '';

        $response = Http::withHeaders([
            'Authorization' => 'Bearer ' . $this->apiKey,
            'Tus-Resumable' => '1.0.0',
            'Upload-Length' => $uploadLength,
			'Upload-Metadata' => $uploadMetadata
        ])->post($endpoint, [
            'maxDurationSeconds' => 3600
        ]);
        
        if ($response->successful()) {
            $headers = $response->headers();
            logger('Direct upload URL generated', $headers);
            // return the headers
            return $headers;
        }

        throw new \Exception('Error generating direct upload URL: ' . $response->body());
    }

Issues Faced:

  1. CORS Errors: Despite setting CORS headers correctly in my Laravel responses, when using the direct Cloudflare upload URL as the endpoint in Uppy/Tus, I consistently encounter CORS issues.
  1. Method Handling Issues: When switching the endpoint to my Laravel API route (/api/media/direct-upload-url), which is intended to act as a proxy, I face method handling errors.
  • Example Error: “[Uppy] [10:17:30] tus: unexpected response while creating upload, originated from request (method: POST, url: /api/media/direct-upload-url, response code: 405, response text: Only HEAD and PATCH requests allowed at this endpoint.”

I already visited this Repo by schachte: GitHub - Schachte/cloudflare-stream-tus-php: TUS upload implementation for Cloudflare Stream in PHP and tried implementing the logic.