Trying to integrate Cloudflare stream into my laravel application

Tus
1

Hi I have more of a question than a bug. I have a laravel application that I am trying to do a direct creator upload . according to the cloudflare folks The steps to follow:

  1. Point Uppy’s endpoint to my server’s API endpoint (not cloudflare upload URL)
  2. My server requests an upload URL from cloudflare API (extracting it from the location header).
  3. My server then sends an empty 201 response with the upload URL in it’s own Location header
  4. Uppy automatically extracts the Location header and uploads the correct URL
    What I have done so far.
    1 set up ankitpokhrel/tus-php in my laravel app.
  5. created client in my laravel blade/frontend (seems to work)
  6. created server with steps in github.com/ankitpokhrel/tus-php/wiki/Laravel-&-Lumen-Integration (not sure on this one)
    I have a few questions and issues:??
  7. in my client code I pointed the endpoint to .use(Uppy.Tus, { endpoint: ‘mydomain/tus/’ }); is this correct??
  8. Is mydomain/tus supposed to be a tus server.? when I go directly to mydomain.com/tus i get a 404 error but the response header does say something about tus-resumable 1.0.0 .
  9. where exactly do I send the request to the cloudflare’s api to receive the tokenized upload link? is it in the tus server at TusServiceProvider.php ?
2

createvideo.blade.php

var uppy = Uppy.Core()
        .use(Uppy.Dashboard, {
            trigger: '.UppyModalOpenerBtn',
            inline: true,
            target: '#DashboardContainer',
            replaceTargetContent: true,
            showProgressDetails: true,
            note: 'Images and video only, 1–5 files, up to 10 MB',
            height: 470,
            metaFields: [
                { id: 'name', name: 'Name', placeholder: 'file name' },
                { id: 'caption', name: 'Caption', placeholder: 'describe what the image is about' }
            ],
            browserBackButtonClose: true
        })
        .use(Uppy.Tus, { endpoint: 'https://blackbelt.guru/tus/' });

    uppy.on('complete', result => {
        console.log('successful files:', result.successful);
        console.log('failed files:', result.failed)
    })

TusServiceProvider.php

<?php

namespace App\Providers;

use TusPhp\Tus\Server as TusServer;
use Illuminate\Support\ServiceProvider;

class TusServiceProvider extends ServiceProvider
{
    // ...

    /**
     * Register the application services.
     *
     * @return void
     */
    public function register()
    {
        $this->app->singleton('tus-server', function ($app) {
            $server = new TusServer('redis');

            $server
                ->setApiPath('/tus') // tus server endpoint.
                ->setUploadDir(storage_path('app/public/uploads')); // uploads dir.

            return $server;
        });
    }

    // ...
}
3

the error while trying to upload

error: "tus: unexpected response while creating upload, originated from request (response code: 404, response text: )"

from console

	
GET
	https://blackbelt.guru/public/tus
Status404
Not Found
VersionHTTP/2
Transferred1.67 KB (0 B size)
Referrer Policystrict-origin-when-cross-origin

	
access-control-allow-headers
	Origin, X-Requested-With, Content-Type, Content-Length, Upload-Key, Upload-Checksum, Upload-Length, Upload-Offset, Tus-Version, Tus-Resumable, Upload-Metadata
access-control-allow-methods
	GET, PUT, POST, DELETE, OPTIONS
access-control-allow-methods
	GET,POST,PATCH,DELETE,HEAD,OPTIONS
access-control-allow-origin
	*
access-control-allow-origin
	
access-control-expose-headers
	Upload-Key, Upload-Checksum, Upload-Length, Upload-Offset, Upload-Metadata, Tus-Version, Tus-Resumable, Tus-Extension, Location
access-control-max-age
	86400
cache-control
	no-cache, private
content-encoding
	gzip
content-type
	text/html; charset=UTF-8
date
	Sun, 18 Apr 2021 10:46:04 GMT
server
	LiteSpeed
set-cookie
	XSRF-TOKEN=eyJpdiI6IjdUdCtGOWdHUEFGdk1EZ1JkSDhoUHc9PSIsInZhbHVlIjoiL3poek4zeEZJR3EyTlJwT2I3dTJlSjMzQzlKbjl5ZkZReWc3S2o1ZitiM3hnZmtxSGNQMXl3TkVFR2FQL2NMSUd4dG9pUjFPWFZoeUZEZEhhT05GQTluMzZ0ZytOaXJmNDhNWjVlSzV0T0wvVjhtd2lyWDdTWGNzZWE0Z1BDQkkiLCJtYWMiOiIyNDExZGJhNTUxY2NjNjlkYTkxODcyYmQ5YjViMDUyODIwM2Y5YjM5ZjRmODQxZGY5ZGE2MmFjZmE5MWEzZGNjIn0%3D; expires=Sun, 18-Apr-2021 12:46:04 GMT; Max-Age=7200; path=/; samesite=lax; secure
set-cookie
	bigdojo_session=eyJpdiI6Ikh3VjFrWitLcHI4K3J5eS9EdXAxWHc9PSIsInZhbHVlIjoiY0hhN0lvVi9TL2l2U3RvVmNRcy96TFByeGlQaXRLazRDaGxjOWttNHpNUFZmcGdNb0ppeTRoK3E2R2Q1OG04VHRtZ09iQWdtQ1pFVU5XdnUvb1o2Y0NQRmJacDcvTS8zRm5ERjZ4aVpxZlZxa0VNZFVKc3BYUGo0VnB3b3I1L2kiLCJtYWMiOiJlN2Q0NTdjMzI1MGUxNmQ0YWIxOTc3YWY5ZjkzMTg3Mjg4ODBjOWEwNWE5NDJmZWRhMTQ2MGNlZjQ1M2NlZGEzIn0%3D; expires=Sun, 18-Apr-2021 12:46:04 GMT; Max-Age=7200; path=/; httponly; samesite=lax; secure
tus-resumable
	1.0.0
vary
	Accept-Encoding
x-content-type-options
	nosniff
X-Firefox-Spdy
	h2
x-frame-options
	sameorigin
	
Accept
	*/*
Accept-Encoding
	gzip, deflate, br
Accept-Language
	en-US,en;q=0.5
Connection
	keep-alive
Cookie
	XSRF-TOKEN=eyJpdiI6ImRIVzBaeUlkMzNNRE4zVVNVT0ladnc9PSIsInZhbHVlIjoibmNhRm82cnJVU0lWVWQ1cEF1RjJybTVZMGNWRDRmblhiRUd5dWhJU0NIV1ZkTkhVL2dZSDRPS3FaWWdscEpPRXhkZ3dOa2MyUnhlZmRiUWFacjV2UkhKTFZyVTZQd1dLZDF5dDlzY251NUVuOWt2dkw2bWMrbjZmZEdXN2VHMGkiLCJtYWMiOiIwMWJkY2VjYzU2MzQ2Yzk1YzljZTlhN2VkNGVhOTY4NGE5Mjc1NjgxMWM5ZjI5NmU3NjEzODI0YTEyMWQ0ZjdhIn0%3D; bigdojo_session=eyJpdiI6ImZ6MnRuMjNSQlpocHRkeDFib245M2c9PSIsInZhbHVlIjoiYys5L1pOQmE5cjUzNVpweW8rN1pJT09HMXpLZGdmTk9pRXhQTU9ITmxINFNJb2FJQ3RJY0tBQ3ZIMlo3dzVsNCsyREpwU0prRm0xQVhxSFNJU0ErOG9Zb203My9yNlo3eDRYc2dpZDFJZG13eVQzUzhIS1IxbkJ5N3NKeXJOcGoiLCJtYWMiOiJhYmQ5NjAwOTdkZTQ1NTRmZTUwMWViNzU1MDBlYjg1ZDVjZmU5OTBjY2VkMmQzMDk3YzAyZDg1MmEwZjJkMTljIn0%3D
Host
	blackbelt.guru
Referer
	https://blackbelt.guru/school/videocreate
TE
	Trailers
Tus-Resumable
	1.0.0
Upload-Length
	4494002
Upload-Metadata
	relativePath bnVsbA==,name MTE5NTc5NV82NjE2MDQ4MjM4Njg2MTBfMTkxMzhfbi5tcDQ=,type dmlkZW8vbXA0,filetype dmlkZW8vbXA0,filename MTE5NTc5NV82NjE2MDQ4MjM4Njg2MTBfMTkxMzhfbi5tcDQ=
User-Agent
	Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:87.0) Gecko/20100101 Firefox/87.0
4

and the code to Cloudflare that does return a tokenized upload link while I tested it in my controller backend. . not sure if I need to write this code into the server/TusServiceProvider?

$response = Http::withHeaders(['Authorization' => 'bearer xxxxxx', 'Tus-Resumable' => '1.0.0','Upload-Length' => 900000000])->post('https://api.cloudflare.com/client/v4/accounts/xxxxxxxx/stream?direct_user=true');

 $url = $response->headers()['Location'][0];
5

Hello there,

I have no experience with tus-php, so I cannot answer those questions. You might want to contact the author directly on GitHub. However, I can try to help you with the other questions a bit:

Yes, that is correct but be sure to include the correct protocol, e.g.:

.use(Uppy.Tus, { endpoint: ‘https://mydomain/tus/’ });

Yes, it must be a tus server.

The 404 is not necessarily a problem. The tus server only responds with successful responses for proper tus requests and that’s not the case when you visit the tus server with your browser.

As said before, I cannot help you with tus-php but I am not sure you actually need a proper tus server in your case. It’s enough to setup a POST route and then parse the Upload-Length header to get the file size. Then you can send your request to Cloudflare and respond with the proper Location header. Including tus-php is probably more hassle than you need here.