chrisidakwo/laravel-resumable-upload

Easy and flexible integration of resumable (chunk and async) uploading of files for any JS file uploader such as Resumable.js

dev-master 2023-06-14 05:20 UTC

Requires

• php: ^8.0
• laravel/framework: ^9|^10.0

Requires (Dev)

• dg/bypass-finals: ^1.2
• phpspec/prophecy-phpunit: ^2.0
• phpunit/phpunit: ^9.2

MIT

• Leo Daniel Studer
• Ekojoka Chris Idakwo

README

This laravel Package implements a chunk uploading feature using upload handlers. The idea is, that you have one single Upload route and you pass the handler name to init the Upload to it. This handler then handles the authorization, and file processing. The Upload itself is managed by the Upload Controller globally.

Installation

The installation is done via composer

composer require chrisidakwo/laravel-resumable-upload

As the package comes with some migrations, run them.

artisan migrate

The package comes with a config, so you should publish the package using

artisan vendor:publish

Installation

In the resumable-upload.php config file, you need to declare Handlers to use this package. A handler always needs to extend the ChrisIdakwo\ResumableUpload\Contracts\UploadHandler Contract.

The methods to implement are pretty straight forward.

Config

• Handler
• Database Table Name
• Route

Javascript

A simple implementation of Resumable.js Requirements: axios,resumable.js

It's important to set the forceChunkSize parameter because each chunk is checked to have the exact Chunk size (except if it's the last one). If not, the chunk is marked as invalid and refused. Also, the chunkSize must be the same as defined in the laravel config (resumable-upload.php)

const r = new Resumable({
    target:'/upload',
    query: file => {
        if(file.token){
            return {token:file.token};
        }
        return {};
    },
    chunkSize: (10 * 1024 * 1024),
    forceChunkSize: true
});

Once a file is added, you need to call the init method with a handler name to get an upload token, which is then used to perform the upload itself.

r.on('fileAdded', file => {
    // Pause the file
    file.pause();

    // Make the init call
    axios.post('/upload/init',{
        handler:'basic', // name defined in config
        size: file.size,
        type: file.file.type,
        name: file.fileName
    }).then(response => {
        if(response.data.data.token){
            // Save the token to the file
            file.token = response.data.data.token;
            file.pause(false);
            r.upload();
        }
        else{
            file.cancel();
        }
    }).catch(error => {
        file.cancel();
    });
});

As soon as the upload is done, we will call the complete endpoint to process the file

r.on('fileSuccess', file => {
    axios.post('/upload/complete',{
        token: file.token
    }).then(response => {
        console.log(response.data);
    })
})

Done, you can now upload large files in chunks and process them easily.