Uppy, TusPHP and ProcessWire for large file uploads

[psy]

I've been in htaccess hell for days. Has anyone successfully implemented a TusPHP server with ProcessWire using the Upply client? If so, please share how you did it.

https://uppy.io/

https://github.com/ankitpokhrel/tus-php

I saw that @LostKobrakai had created a chunked upload solution https://gist.github.com/LostKobrakai/ddb11c64dcb0f1bf1c8eed4dd534a868 that used resumable.js which is great but I'd really like to to use the Uppy client, and eventually implement the Uppy companion plugin to upload directly to a cdn such as Amazon S3 or Google Cloud.

I've exhausted every possible .htaccess variation I can think of. Also tried to implement the Tus server in a subdirectory which ended in CORS purgatory.

The Uppy client is beautiful and super simple to implement in a template. Getting the Tus server to work in a ProcessWire installation is a different matter. Even tried to adapt the WordPress plugin suggestions but guessing the WP htacess isn't nearly as comprehensive as the ProcessWire (with ProCache) htaccess file.

This is the bit that breaks ProcessWire:

# .htaccess

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^files/?(.*)?$ /server.php?$1 [QSA,L]

ProcessWire has its own very important 'files' directory so I changed the Uppy/Tus directory to 'tus-endpoint' and tried to replace server.php with a PW page called 'tus-server' that did the TusPHP server.php stuff in a template.

Help and suggestions extremely welcome

 

[Robin S]

On 9/1/2019 at 12:38 AM, psy said:

This is the bit that breaks ProcessWire:

# .htaccess

RewriteEngine on

RewriteCond %{REQUEST_FILENAME} !-f
RewriteRule ^files/?(.*)?$ /server.php?$1 [QSA,L]

This part is optional - it's exists in case you want your server endpoint to be something pretty like http://yourdomain.com/files/

But if it's causing you a problem you can leave out the tus-php .htaccess and set your endpoint to http://yourdomain.com/server.php or whatever with no rewrite needed.

[Robin S]

Here's a basic example of how you could save files to a PW page via a front-end page using tus-php and Uppy.

1. Install tus-php via Composer.

2. Create a PW template that will provide the tus-php server endpoint - in this example the template is named "uppy".
In the template Files tab, disable any automatically appended template file.
In the template URLs tab, allow URL segments.
If using Tracy Debugger, disable the debug bar in the front-end for this template because we don't want any output from Tracy being included in the response.

The contents of the uppy.php template file:

<?php namespace ProcessWire;

// Create PW temp directory
$td = $files->tempDir('uppy');
$td_path = (string) $td;

// Create TusPhp server
$server = new \TusPhp\Tus\Server();
// Set path to endpoint - no trailing slash here
$server->setApiPath('/uppy');
// Set upload directory
$server->setUploadDir($td_path);

// Listener function for when an upload is completed
$server->event()->addListener('tus-server.upload.complete', function(\TusPhp\Events\TusEvent $event) {

	// Get path of uploaded file
	$file_path = $event->getFile()->getFilePath();

	// Add uploaded file to "files" field on Home page
	$p = wire('pages')->get(1);
	$p->of(false);
	$p->files->add($file_path);
	$p->save('files');

});

// Send response
$response = $server->serve();
$response->send();

// Exit from current PHP process
// Could probably use PW halt here as an alternative
// return $this->halt();
exit(0);

3. Create a page using the template - in this example the page is at url http://1testing.oo/uppy/

4. Add the Uppy assets, JS and markup to the template of the front-end page that you will upload files from. Markup Regions are used in this example.

<pw-region id="scripts">
	<script src="https://transloadit.edgly.net/releases/uppy/v1.4.0/uppy.min.js"></script>
	<script>
		const uppy = Uppy.Core({debug: true, autoProceed: false})
			.use(Uppy.Dashboard, {target: '#uppy-box', inline: true})
			.use(Uppy.Tus, {endpoint: 'http://1testing.oo/uppy/', limit:10});
	</script>
</pw-region><!--#scripts-->


<pw-region id="stylesheets">
	<link href="https://transloadit.edgly.net/releases/uppy/v1.4.0/uppy.min.css" rel="stylesheet">
</pw-region><!--#stylesheets-->


<div id="body">
	<div id="uppy-box"></div>
</div><!--#body-->

5. Upload files via the front-end and see that they are added to the "files" field on the Home page.

Edited September 2, 2019 by Robin S
Uppy template must allow URL segments

[psy]

Thanks @Robin S great work however still can't get it happening on my site ?

Using your method I get a Forbidden 403 Error in the Chrome dev console, eg https://mysite.com/uppy 403

 

[Robin S]

I forgot to mention that you must enable URL segments on the uppy template. I've updated my previous post to include this step. Although I'm not sure why you would get a 403 because of that - rather you should get a 404.

 

[psy]

@Robin S - brilliant! Your code works like a charm on my site after adjusting a bit of my own code to suit.

Can't thank you enough ?

 

[Mr. NiceGuy]

I used this code on my site as well and added uppy meta information for setting the page id where the files will be uploaded. 

Here is the code if you are also looking how to do this: 

 

<script src="https://transloadit.edgly.net/releases/uppy/v1.9.2/uppy.min.js"></script>
  <script>
    const uppy = Uppy.Core({debug: true, autoProceed: false, meta: {
  pageid: 1488
} })  .use(Uppy.Dashboard, {target: '#uppy-box', inline: true})
      .use(Uppy.Tus, {endpoint: 'MYURL/uppy/', limit:10});
  </script>

$td = $files->tempDir('uppy'); // CMS
$td_path = (string) $td;

// Create TusPhp server
$server = new \TusPhp\Tus\Server();
// Set path to endpoint - no trailing slash here
$server->setApiPath('/uppy');
// Set upload directory
$server->setUploadDir($td_path);

// Listener function for when an upload is completed
$server->event()->addListener('tus-server.upload.complete', function(\TusPhp\Events\TusEvent $event) {
	$file_path = $event->getFile()->getFilePath();
	p = wire('pages')->get(intval($event->getFile()->details()['metadata']['pageid']));  // extract page id from uppy metadata
	$p->of(false); // CMS related
       $p->files->add($file_path); //CMS related
	$p->save('files'); //CMS related
});
// Send response
$response = $server->serve(); 
$response->send();
exit(0);