oneofftech/laravel-tus-upload

Upload files to your Laravel application with the tus.io resumable upload protocol.

, _(*1)

Laravel Tus based Upload

A package for handling resumable file uploads in a Laravel application via the tus.io resumable file upload protocol., _(*2)

This package contains a PHP component for controlling the Tus upload server and a javascript library for interacting with the server. The Tus upload server is the official Tus server binary, this package does not re-implement the tus protocol in pure PHP., _(*3)

This package currently works only on Linux based OS. If you want to try it on Windows 10, please take into consideration to use the Windows Subsystem for Linux, _(*4)

Features (some in development)

• [x] Resumable upload mechanism (with self distributed tusd binary)
• [x] Upload queue handling
• [x] Javascript Upload component
• [x] Hopefully easy setup

Installation

To get started, install Laravel Tus Upload via the Composer package manager., _(*5)

Requires PHP >= 8.0, _(*6)

composer require oneofftech/laravel-tus-upload

The OneOffTech\TusUpload\Providers\TusUploadServiceProvider::class service provider is auto-registered., _(*7)

Routes registration, _(*8)

The API routes are not registered automatically by the service provider. This is done on purpose to have more customization options, for example the usage of custom routes and controller logic., _(*9)

To register the routes call \OneOffTech\TusUpload\Tus::routes() from within your application RouteServiceProvider, _(*10)

<?php

namespace App\Providers;

use OneOffTech\TusUpload\Tus;
use Illuminate\Foundation\Support\Providers\AuthServiceProvider as ServiceProvider;

class RouteServiceProvider extends ServiceProvider
{
    // ...

    /**
     * Define your route model bindings, pattern filters, etc.
     *
     * @return void
     */
    public function boot()
    {
        Tus::routes();

        parent::boot();
    }
}

Database migrations, _(*11)

The TusUpload service provider registers its own database migration directory with the framework, so you should migrate your database after registering the provider., _(*12)

php artisan migrate

The TusUpload migrations will create a table to store the uploads queue., _(*13)

In your User model you can, now, add the HasUploads trait in order to grab the current upload queue for a specific user., _(*14)

Authorizing an upload, _(*15)

To overcome/prevent an un-authorized file upload the upload creation endpoint is protected with the web guard and a gate. You see the overall request flow for a better view on how the process works., _(*16)

The Gate, named upload-via-tus, will let you verify deeply the upload action against the user that is performing it., _(*17)

Currently you must define the gate implementation. The suggested location where the Gate can be defined is it in the boot method of the AuthServiceProvider class:, _(*18)

/**
 * Register any authentication / authorization services.
 *
 * @return void
 */
public function boot()
{
    $this->registerPolicies();

    Gate::define('upload-via-tus', function ($user, $upload_request) {
        // $upload_request instanceof \OneOffTech\TusUpload\Http\Requests\CreateUploadRequest
        // ...
    });
}

The callback will receive the $user that wants to do the upload and the CreateUploadRequest. The request might contain custom metadata, according to the caller. Required inputs are the request id, the filename, while filesize might be set, even if null. The filesize can be null if the browser don't support the size property on the File object. In addition the filetype attribute can be sent, if the file mime type is already known to client., _(*19)

Additional metadata can be sent in the request. In this case the additional fields will be saved in the metadata field on the TusUpload object once the upload is authorized., _(*20)

Javascript and the frontend, _(*21)

The package don't provide fancy Javascript based interactions, but only a library to perform the uploads., _(*22)

The library is available in public/js/tusuploader.js and currently require axios, to make Ajax requests. Axios should be available on window.axios., _(*23)

For an example on how to properly include axios you might want to take a look at the default bootstrap.js file available in Laravel after a clean install., _(*24)

Advanced Configuration

Out of the box the package has some base defaults, like the location of the tusd executable, the upload folder and so on., _(*25)

You can configure the tus related options via environment variables:, _(*26)

In alternative, if you prefer, you can publish the configuration file in your Laravel installation., _(*27)

php artisan vendor:publish --provider="OneOffTech\TusUpload\Providers\TusUploadServiceProvider" --tag=config

If you want to customize both configuration and migrations use php artisan vendor:publish --provider="OneOffTech\TusUpload\Providers\TusUploadServiceProvider", _(*28)

Starting the Tus server

The tusd binary is already included in the package under the /bin folder. The binaries are available for MacOS, Windows and Linux. The included binaries have been compiled for 64 bit architecture. Each executable has a suffix to distinguish between the OS version., _(*29)

To execute the Tusd server launch the artisan tus:start command., _(*30)

php artisan tus:start

This command will keep listening until killed., _(*31)

Running behind a proxy

If you are going to proxy requests to tusd, please refer to Can I run tusd behind a reverse proxy? for the proxy configuration., _(*32)

In addition please specify the following configuration attributes in your .env file:, _(*33)

TUSUPLOAD_USE_PROXY=true
TUSUPLOAD_URL=http://example.dev/tus
TUSUPLOAD_HTTP_PATH=/tus/
TUSUPLOAD_HOST=0.0.0.0

where http://example.dev/tus is the absolute URL that the will be proxied to the tusd deamon., _(*34)

How it works (in brief)

A tusd binary will listen for incoming uploads, sent by the javascript client. Via hooks the tusd executable calls the Laravel application to authorize the upload and to inform about the upload progress. At the end of the upload an event will be triggered to enable post-processing of the uploaded file., _(*35)

For more information please refer to docs/flow.md and docs/database.md., _(*36)

Javascript library

to be documented, _(*37)

<script src="./public/js/tusuploader.js"></script>

var uploader = new window.TusUploader({autoUpload: true});

var input = document.getElementById('file');

input.addEventListener("change", function(e) {
    // Get the selected file from the input element
    var file = e.target.files[0]

    // add it to the uploader queue
    var addedUpload = uploader.upload(file);
});

TusUploader object

The TusUploader object handles file upload and queue management. To create an instance of the TusUploader use the constructor function., _(*38)

var uploader = new window.TusUploader(options: { /*...*/ });

arguments, _(*39)

• option: Object:
  • endpoint: the URL path to which the library calls for authorizing a file upload
  • retryDelays: the array of delays, in milliseconds, that will be used in case the tus server is not replying to requests
  • autoUpload: a boolean indicating whenever the file added to the queue must be uploaded immediately

methods, _(*40)

• add(file, metadata) : TusUploader.Upload adds a file to the upload queue
• remove(id) : TusUploader.Upload[] remove a file, given its id, from the queue. It cancel the upload if already in progress
• uploads(filter) : TusUploader.Upload retrieve the upload queue. Optionally can be filtered using the filter predicate
• on(event, callback) register an event listener
• off(event, callback) unregister a previously registered event listener

TusUploader.Upload object

The TusUploader.Upload object define a single file added to the queue of the uploads, _(*41)

properties, _(*42)

• id: the identifier associated to this upload
• metadata: the metadata information about the upload, by default the filename. It is enriched with the metadata added once the upload has been added to the queue
• transport: the instance of the TusClient that will handle the real file upload
• status: the file upload status, see TusUploader.Status
• uploadToken: the upload authentication token granted by the server
• uploadPercentage: the completion percentage
• uploadSize: the total file size in bytes
• uploadTransferredSize: the bytes received by the server
• file: the original File instance added to the queue

methods, _(*43)

• start: start the upload
• stop: stop and cancel the upload

Events

• upload.queued a File was added to the upload queue
• upload.started a File upload, in the queue, was started
• upload.progress a File in the queue is being uploaded and this is the last progress report
• upload.completed a File upload completed
• upload.cancelled: upload was in progress, but has been interruped
• upload.failed: a File upload failed
• upload.removed: a queued upload has been removed before sending the file to the server

API

to be documented, _(*44)

Events

File Upload related events

All events have a single property called upload that contains the instance of the TusUpload being subject of the status change., _(*45)

TusUploadStarted

The upload is started. At this stage the file don't exists yet and is safe to only consider the filename and eventual metadata sent by the client., _(*46)

TusUploadProgress

The file upload is in progress. This event is triggered everytime a chunk of the file is uploaded. The offset value on the the TusUpload object will give the information on how many bytes have been transferred., _(*47)

TusUploadCompleted

The file upload completed and is now safe to access the file content. The path on disk can be retrieved with the path() method on the TusUpload instance., _(*48)

TusUploadCancelled

The user cancelled the upload. At this point the tus server might have already deleted the partial upload, _(*49)

Server control events

TusUploaderStarted

Triggered when the server is listening for connections, _(*50)

TusUploaderStopped

Triggered when the server is being shutdown gracefully, _(*51)

Faq

Can be run on Windows?

Currently running tusd on Windows with the hook support is not possible, therefore if you are on Windows we encourage to use it through the Windows Subsystem for Linux, _(*52)

tusd, the alternative start, _(*53)

This is equal to the tus:start command with default options (assuming the start from the Laravel root folder), _(*54)

# $PACKAGE_DIR is the directory in which the package content can be found
$PACKAGE_DIR/bin/tusd-linux --dir ./storage/app/uploads --hooks-dir $PACKAGE_DIR/hooks/linux -behind-proxy -base-path /uploads/

What's the Tus Base Path

Tus base-path is the endpoint where tusd listen for file upload requests. To work it must end with /., _(*55)

I need a reverse proxy?

Probably yes. Tusd usually listen on a different port than the one configured for your application, if you want to have everything under the same port, you might want to use a proxy., _(*56)

Please refer to Can I run tusd behind a reverse proxy? for further explanation., _(*57)

Contributions

Thank you for considering contributing to the Laravel Tus Upload package!, _(*58)

The contribution guide is not available yet, but in the meantime you can still submit Pull Requests., _(*59)

Development oriented documentation is located under the docs folder in this repository., _(*60)

License

This project is licensed under the MIT license, see LICENSE.txt., _(*61)