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

• Uppy AwsS3Multipart Docs
• AWS S3 Multipart Uploads
• Example Laravel S3 multipart controller
• TALL stack + Uppy example

---

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!

I like single action controllers, and if a long routes file is a concern, you could always further break that up as well, nothing says you have to only use a single route file.

I recently worked on a project and we encapsulated each distinct collection of functionality into modules, each module had its own routes, config, migrations, etc. it was more effort to setup, yes - but in the long run should be a much easier to maintain project.

Sorry to raise this post from the dead, but I just published a package that makes this doable. It updates the DB (you control how often with a configurable throttle) so that redis sessions can be tracked/listed/destroyed.

User Agent enrichment happens automatically, and you can optionally install the MaxMind GeoLite2 DB and get Location detail too.

100% type coverage, test coverage, and phpstan at level 9.

https://github.com/willvincent/laravel-session-manager