PHP

Do you want your users to upload large files? .. I mean real large files, like multiple GB video .. Do your users live in places with a bad or unstable connection? .. If your answer is “yes”, then this article is exactly what you are looking for.

Background

At Chaino Social Network, we do care about our users, their feedback is our daily fuel, and a smooth enhanced UX is what we seek in everything we do for them. They asked for a video uploads feature, we made it for them .. they asked for a smaller processing time, we made it too .. they asked to upload a larger video files (up to 1 GB), again we made our precautions and increased the size to 1 GB .. but then we felt like hitting a wall, when we were swarmed by users’ feedback complaining that video uploads is easily interrupted by the bad networking, and the problem gets worse and worse when the files gets bigger and bigger where it becomes more vulnerable to interruptions and failures .. that is when we started our hunt for a solution. but let’s first see the current way of uploading.

Problem with normal way of Uploading

Our normal way of uploading is basically using the change event to start validating the file then uploading it as a multipart request where nginx does all the work for us then delivers the file path to our php backend where we can start processing the video, like the following:

As you can see, both client & server sides expect the file to be sent in one shot no matter how big it is, but in the real world, networks get interrupted all the time, which forces the user to upload the file over & over again from the beginning! , which is super frustrating with large files like videos!

In our hunt for a solution, At first we found some honorable mentions like Resumable.js, they didn’t really introduce a complete solution because most of these solutions focus only on the client side, where the server side is actually the real challenge! but then we found the only real complete solution out there Tus.io which was beyond our dreams!

Solution .. The Awesome One

Now we need a solution who can make 2 things:

Protect our users from network interruptions, where the solution should be able to automatically retry sending the file until network is hopefully stable again.

Gives our users a resumable upload in case of total network failures; so after the network comes back, users can continue uploading the file again where they left off.

I know these requirements seem like a dream, but this is why Tus.io is so awesome in so many levels, simply this is how it works:(Illustration by Alexander Zaytsev)

I tried this combination locally & everything worked like a charm. But then we deployed the solution to our Beta servers, and this is when the panic begins🙈.

Production Shocks

I know we deployed on Beta servers only, but let’s face it, most of us expect Beta to be like 5 minutes away from deploying on production .. which wasn’t our case 🙂. So, these are the problems we faced after using a real production-like environment:

Permission Denied for File Cache
Remember we used File Cache before for simplicity, well, the library expects you to pass a configuration for the cache file’s path or it will just make cache file inside the library’s folder in the vendor folder which gives us a Permission Denied error for trying to write to the vendor folder without the right permissions, so let’s just pass the right configuration with a path accessible by all server’s users like the /tmp folder (no need for keeping a long term cache, after all the cache won’t exceed 24 hours per file by design), and here is how you can do so:

TusPhp\Config::set([
/**
* File cache configs.
*
* Adding the cache in the '/tmp/' because it is the only place writable by
* all users on the production server.
*/
'file' => [
'dir' => '/tmp/',
'name' => 'tus_php.cache',
],
]);

HTTPS at the load-balancer
Locally I’m using a self-signed certificate, so all the traffic reaching the backend is totally Https, but on the production, the ssl is at the load balancer level, which redirects the traffic to our servers as Http only, which tricked Tus into believing that the video url is in Http only, which breaks the uploading, so I had to fix the response headers to add the Https back again:

// in the file controller before sending the response
// get/set headers the way that suits your framework
$location = $response->headers->get('location');
if (!empty($location)) {// `location` is sent to the client only the 1st time
$location = preg_replace("/^http:/i", "https:", $location);
$response->headers->set('location', $location);
}

PATCH is not supported
Yet, still not working, it turns out that our production environment setup doesn’t allow PATCH requests, and this is where tus-js-client came to the rescue with its option overridePatchMethod: true which depends on usual POST requests instead.

Re-Uploading starts from 0% !!
Now, everything works fine. On my local machine uploads was lightening fast, so I couldn’t actually test the resumability part of our solution, so let’s try it on the beta, let’s cancel the upload at 40% and try to re-upload it again .. Oh Ooh, it started from 0%, What the heck just happened!
After digging a lot in my server part (which was my suspect), it turns out that tus-js-client has an option called chunkSize with a default value of Infinity, which means upload the whole file at once 🙈 !!, so I just fixed it with specifying a chunk size of 1MB chunkSize: 1000 * 1000

Wrapping up the whole solution
After putting it all together, here is our final version:

Conclusion
Before Tus I always thought that uploading files has only one traditional way, and no one can touch it, to the extent that I felt that it is pointless even searching for a solution, but never stop at your own boundaries, break them & go beyond, and you will reach new destinations you never thought possible.
Now, uploading large files became dead simple, & I really want to thank the team behind Tus.io for what they did.

Like this:

Using Google Analytics for tracking your users’ behavior is almost like using Air for breathing, then it comes its Custom Campaigns feature that will help you identify which of your marketing methods are more effective, or which campaigns emails gives you the better traffic, and so on.

But, how could I append the custom campaign url parameters to all my emails at once? .. Or what if I want to know which of my transactional emails (notifications, invitations … ) is better in retaining users, how could I append a parameter containing email template’s name to all links in the email? & how to do it in a smart way?

Answer #1 (the dumbest answer, but working!)
Just go through every single link in your email templates & append your campaign parameters or template’s name referral. Not only this will cost you time & effort, but also you will bang your head against the wall when you try to change it later!

Answer #2 (not recommended)
Be lazy & use Regex to process the final email’s html (just before sending) & append whatever you like to all the links in it. You can use the one from this answer, or even this one, or even come up with your own super enhanced regex to do the job, it is up to you.

Answer #3 (recommended)
Why reinvent the wheel by doing your own Regex while you can use an official Dom parser of your choice, since I’m using PHP, then it comes to the awesome DOMDocument class & its pretty effective loadHTML() function & here comes the awesomeness (thx to this answer by Wrikken which I edited after trying it for real):