Form Upload Async

TallStackUI v4 introduces a new and extremely useful component for file uploads: upload.async . Asynchronous uploading splits the file into smaller parts, allowing you to upload large files without changing the default PHP settings. The main difference between upload and upload.async is how the file is sent. While upload is good for simplifying and speeding up file uploads, it requires some changes to the default PHP settings to allow large files. upload.async , on the other hand, allows uploading large files without necessarily changing anything in PHP, but requires a bit more code to work.

The route prop accepts a named route or a plain URL. Either wire:model or name is required.

With upload.async , the selected file is divided into chunks. Each chunk is sent to the backend as an individual POST request. To process them, you need to create a Laravel controller with an upload method, use the TallStackUI upload trait, and point a route to the controller. Here is a basic example:

use Illuminate\Http\Request;
use TallStackUi\Http\AsyncUpload\Uploader;
 
class UploadController
{
    use Uploader; 
 
    public function store(Request $request)
    {
        return $this->upload($request, [ 
            'disk' => 'public',
            'directory' => 'posts/attachments',
            'rules' => ['file' => ['mimes:jpg,png,pdf']],
        ]);
    }
}

// routes/web.php
 
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\UploadController;
 
Route::post('/files/upload', [
    UploadController::class, 'store'
])->name('files.upload');

Finally, you can use the component:

<x-upload.async :route="route('files.upload')" label="Document" />

Before continuing, it is important to know:

• The component can be used outside Livewire components.
• You need to use a wire:model or name (outside Livewire components) to receive the uploaded file.
• Without a wire:model or name , the component will throw an exception.
• When the file is successfully uploaded, you will receive an array of data that represents the file:

[
  'id'        => '9f1c...-uuid',
  'path'      => 'posts/attachments/8ad2....pdf',
  'real_name' => 'contract.pdf',
  'size'      => 184320,
  'mime'      => 'application/pdf',
  'url'       => 'http://app.test/storage/posts/attachments/8ad2....pdf',
]

An option to stage the files and wait for the send button.

<x-upload.async :route="route('files.upload')"
                label="Files"
                accept="application/pdf"
                multiple
                manual
                :max-size="60">
    <x-slot:footer>
        <div x-show="files.length" class="mt-3 flex items-center justify-between">
            <span x-text="summary()" class="text-xs text-gray-500"></span>
 
            <div class="flex items-center gap-2">
                <x-button color="red" x-on:click="clear()" round sm>Abort & Clear</x-button>
                <x-button x-bind:disabled="!sendable() || disabled" x-on:click="send()" round>Upload Now</x-button>
            </div>
        </div>
    </x-slot:footer>
</x-upload.async>

All options of the upload method.

use Illuminate\Http\Request;
use TallStackUi\Http\AsyncUpload\Uploader;
 
class UploadController
{
    use Uploader; 
 
    public function store(Request $request)
    {
        return $this->upload($request, [ 
            'disk' => 'public',
            'directory' => 'posts/attachments',
            'rules' => ['file' => ['mimes:jpg,png,pdf']],
        ]);
    }
}

You can use store to control how the file is persisted after a complete upload. This runs only once when the file is fully uploaded successfully.

return $this->upload($request, [
    'disk' => 'public',
    'store' => fn (SplFileInfo $file, AsyncUploadRequest $request): string => $post 
        ->addMedia($file)
        ->usingFileName($request->input('real_name'))
        ->toMediaCollection('attachments')
        ->getPathRelativeToRoot(),
]);

Without store , the file is persisted based on the directory . Without either of them, the component will throw an AsyncUploadException .

An option to clean up old temporary upload files.

// routes/console.php
 
Schedule::command('tallstackui:async-upload:clear')->daily();

There are many configuration options that you can control globally via the configuration file.