Jump to content
psy

Uppy, TusPHP and ProcessWire for large file uploads

Recommended Posts

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

 

Share this post


Link to post
Share on other sites
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.

  • Like 2

Share this post


Link to post
Share on other sites

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 by Robin S
Uppy template must allow URL segments
  • Like 9
  • Thanks 2

Share this post


Link to post
Share on other sites

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.

 

  • Like 5

Share this post


Link to post
Share on other sites

@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 😍

 

  • Like 6

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...