Jump to content

Uppy, TusPHP and ProcessWire for large file uploads


psy
 Share

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

 

Link to comment
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
Link to comment
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 11
  • Thanks 3
Link to comment
Share on other sites

  • 5 months later...

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);

 

  • Like 2
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...