S3 Chunked Uploads in Livewire

Level 58

Certainly! Here’s a solution outline and example for chunked, direct-to-S3 uploads in a TALL stack (Livewire 3) app, using Uppy (which has robust S3 multipart support).

Why Uppy?

FilePond doesn’t natively support S3 multipart uploads (as of early 2024).
Uppy’s AwsS3Multipart plugin is designed for exactly this use case.
It supports drag-and-drop, multiple files, chunked uploads, and direct-to-S3.

1. Install Uppy

Add Uppy via npm or CDN:

npm install @uppy/core @uppy/dashboard @uppy/aws-s3-multipart

Or use CDN in your Blade view:

<link href="https://releases.transloadit.com/uppy/v3.13.0/uppy.min.css" rel="stylesheet">
<script src="https://releases.transloadit.com/uppy/v3.13.0/uppy.min.js"></script>

2. Set Up S3 Credentials (Server-Side)

Uppy’s multipart plugin requires your backend to provide presigned URLs for each upload part.

You can use uppy-server (Node.js), or roll your own endpoints in Laravel.

Example: Laravel S3 Multipart Endpoints

Add routes in routes/web.php:

Route::post('/s3/create-multipart-upload', [S3MultipartController::class, 'create']);
Route::post('/s3/sign-part', [S3MultipartController::class, 'signPart']);
Route::post('/s3/complete-multipart-upload', [S3MultipartController::class, 'complete']);

Implement the controller methods to use the AWS SDK to:

Create a multipart upload
Sign each part upload
Complete the upload

See Laravel S3 multipart example or AWS docs.

3. Blade View: Add Uppy Dashboard

<div id="drag-drop-area"></div>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        const uppy = Uppy.Core({
            restrictions: { maxFileSize: null, maxNumberOfFiles: null, allowedFileTypes: null }
        })
        .use(Uppy.Dashboard, {
            inline: true,
            target: '#drag-drop-area',
            showProgressDetails: true,
            proudlyDisplayPoweredByUppy: false
        })
        .use(Uppy.AwsS3Multipart, {
            companionUrl: null, // not using Uppy Companion
            createMultipartUpload(file) {
                // Call your Laravel endpoint to create upload
                return fetch('/s3/create-multipart-upload', {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json', 'X-CSRF-TOKEN': '{{ csrf_token() }}' },
                    body: JSON.stringify({ filename: file.name, contentType: file.type })
                }).then(res => res.json());
            },
            // See Uppy docs for signPart and completeMultipartUpload
            // Implement similar fetches to your Laravel endpoints
        });

        uppy.on('complete', (result) => {
            console.log('Upload complete! Files:', result.successful)
            // You can emit Livewire events here if needed
        });
    });
</script>

4. Livewire Integration

You can emit a Livewire event from JS when upload completes, passing S3 file keys.
Or, have Livewire poll for upload status if needed.

5. References & Further Reading

Summary

Use Uppy with the AwsS3Multipart plugin for chunked, direct-to-S3 uploads.
Implement 3 Laravel endpoints to handle S3 multipart upload lifecycle.
Use Uppy’s Dashboard for drag-and-drop and multiple file support.
Notify Livewire when uploads complete.

If you need a sample Laravel controller for the S3 endpoints, let me know!

1 like