How to Build Resumable File Uploads into Your Web Apps With Tus, Laravel and Uppy

The following guide will help you implement fancier file uploads for your web apps. Requirements : Laravel is a web application framework with expressive, elegant syntax. Supported versions > 5.x.x . The version used in this guide is Laravel 8. Laravel : Sleek, modular open-source JavaScript file uploader. Uppy : Open Protocol for Resumable File Uploads. Tus : A pure PHP server and client for the tus resumable upload protocol v1.0.0. Tus-PHP : An open-source (BSD licensed), in-memory data structure store, used as a database, cache, and message broker. Redis Tutorial 1.Install Uppy and its supported plugins (Dashboard, Tus) with NPM. npm install uppy npm install @uppy/dashboard npm install @uppy/tus Create your file upload element in your blade file. In this example, we are using a button. Upload File In order to post your file to your /tus endpoint, you need to add CSRF-TOKEN. Create a meta tag to hold your token in the blade.php which you will pass to your Uppy.js. Create your Uppy configuration in your JavaScript file. import Uppy from '@uppy/core'; import Tus from '@uppy/tus' import Dashboard from '@uppy/dashboard'; const uppy = new Uppy({ debug: false, autoProceed: false, restrictions: { maxFileSize: 1000000, maxNumberOfFiles: 1, allowedFileTypes: ['image/*'], } }) .use(Dashboard, { target: 'body', trigger: '#file_upload', closeAfterFinish: true, browserBackButtonClose: false, showProgressDetails: true, }) .use(Tus, { endpoint: '/tus', // use your tus endpoint here retryDelays: [0, 1000, 3000, 5000], headers: { 'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') } }) We need Redis for cache management. Go ahead and follow the for installing Redis on your system. If you’re running a Windows system you need to install Windows Subsystem for Linux before you begin. I will recommend the Ubuntu distro. guide curl -fsSL https://packages.redis.io/gpg | sudo gpg --dearmor -o /usr/share/keyrings/redis-archive-keyring.gpg echo "deb [signed-by=/usr/share/keyrings/redis-archive-keyring.gpg] https://packages.redis.io/deb $(lsb_release -cs) main" | sudo tee /etc/apt/sources.list.d/redis.list sudo apt-get update sudo apt-get install redis Start the Redis server redis-server Confirm that your redis server is running smoothly and can connect to it redis-cli ping We will now tie everything together with the Tus-PHP from Ankit Pokhrel. Add Tus-PHP with Composer composer require ankitpokhrel/tus-php Create a service provider (eg. TusServiceProvider) and add it to your config config/app.php. php artisan make:provider TusServiceProvider Update the provider with the sample code from the Laravel integration guide. You do not have to exclude the server endpoint from Laravel’s CSRF validation. That’s a security risk and has been taken care of by passing it in the headers. Also, remember to create your upload folder in the storage app->singleton('tus-server', function ($app) { $server = new TusServer('redis'); $server->setApiPath('/tus'); $server->setUploadDir(storage_path('app/public/uploads')); return $server; }); } /** * Bootstrap services. * * @return void */ public function boot() { // } } Add the /tus endpoint to your route to serve requests. Route::any('/tus/{any?}', function () { return app('tus-server')->serve(); })->where('any', '.*'); That’s all folks. Users will be able to resume the upload of files after a network error or closing the browser. Hit the if you need any help. comments Also Published here