Issue with large files breaking user interface

The issue you're experiencing with large files causing your UI to glitch is likely due to the time it takes to upload and process these files. This can cause the UI to become unresponsive or reset due to timeouts or other resource constraints.

Here are a few suggestions to help mitigate this issue:

1. Increase Server Timeout Settings: Ensure that your server's timeout settings are configured to handle large file uploads. This includes settings in your PHP configuration (php.ini) and your web server configuration (e.g., Apache or Nginx).

2. Use Chunked File Uploads: Implementing chunked file uploads can help manage large files by breaking them into smaller pieces and uploading them sequentially. This can prevent the UI from becoming unresponsive and reduce the likelihood of timeouts.

3. Optimize Frontend Handling: Ensure that your frontend is optimized to handle large file uploads. This includes providing feedback to the user during the upload process and ensuring that the UI remains responsive.

4. Use a Library like FilePond: FilePond is a powerful file upload library that supports chunked uploads and provides a smooth user experience. It can help manage large file uploads more effectively.

Here's an example of how you can integrate FilePond into your application:

Step 1: Install FilePond

Include FilePond in your project. You can use a CDN or install it via npm.

Using CDN:

<link href="https://unpkg.com/filepond/dist/filepond.css" rel="stylesheet">
<script src="https://unpkg.com/filepond/dist/filepond.js"></script>

Using npm:

npm install filepond --save

Step 2: Initialize FilePond

Initialize FilePond on your file input element.

<input type="file" id="pdf" name="pdfs[]" multiple>

// Initialize FilePond
const inputElement = document.querySelector('input[id="pdf"]');
const pond = FilePond.create(inputElement);

// Configure FilePond
FilePond.setOptions({
    server: {
        url: '/upload',
        process: '/process',
        revert: '/revert',
        headers: {
            'X-CSRF-TOKEN': '{{ csrf_token() }}'
        }
    }
});

Step 3: Handle File Uploads on the Server

Ensure your server-side code can handle chunked uploads. Here's an example using Laravel:

routes/web.php

Route::post('/upload', [UploadController::class, 'upload']);

app/Http/Controllers/UploadController.php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    public function upload(Request $request)
    {
        if ($request->hasFile('file')) {
            $file = $request->file('file');
            $fileName = $file->getClientOriginalName();
            $file->move(public_path('uploads'), $fileName);

            return response()->json(['status' => 'success']);
        }

        return response()->json(['status' => 'error'], 400);
    }
}

Step 4: Update Your Blade Template

Update your Blade template to include the FilePond input element.

<div class="mb-3">
    <h4>Files</h4>
    <ul class="list-group" style="max-height: 200px; overflow-y:auto">
        @if (count($pdfs))
            @foreach ($pdfs as $key => $pdf)
                <li class="list-group-item d-flex justify-content-between align-items-center">
                    {{ $pdf->getClientOriginalName() }}
                    <a href="#" class="text-danger" wire:click.prevent="removeFile({{ $key }})">
                        <i class="fas fa-trash-alt"></i>
                    </a>
                </li>
            @endforeach
        @else
            <li class="list-group-item">No files selected</li>
        @endif
    </ul>
</div>

<div class="mb-3">
    @if (empty($pdfs))
        <button id='uploadPDFs' class="btn btn-primary" onclick="document.getElementById('pdf').click()">Upload PDFs</button>
    @else
        <button wire:click="uploadPdfs" class="btn btn-success" wire:loading.class='disabled'>Upload</button>
    @endif

    <div wire:loading class="mb-3">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">Loading...</span>
        </div>
        <span>Uploading...</span>
    </div>

    <input type="file" wire:model="pdfs" class="form-control d-none" id="pdf" multiple>
    @error('pdfs')
        <span class="text-danger">{{ $message }}</span>
    @enderror
</div>

By implementing these changes, you should be able to handle large file uploads more effectively and prevent your UI from glitching.