Lapload Laravel Package

Getting Started

Minimal Setup

1. Installation

   composer require simtabi/lapload
   

   Publish assets if needed (check README for any additional steps).

2. First Use Case: Single Image Upload Add the component to a Blade file:

   <livewire:lapload name="singleImage" />
   

   Define the property in your Livewire component:

   use Simtabi\Lapload\Traits\HasLapload;
   
   class MyComponent extends Component {
       use HasLapload;
       public $singleImage; // Stores uploaded image names
   }
   

3. First Use Case: Multiple Images

   <livewire:lapload name="multipleImages" multiple />
   

   Ensure the property is an array:

   public $multipleImages = [];
   

Implementation Patterns

Common Workflows

1. Basic Upload Handling Use the trait’s built-in methods to access uploaded files:

   // Access uploaded files (e.g., in a method)
   $this->getUploadedFiles(); // Returns array of uploaded files
   

2. Customizing Upload Logic Override the trait’s upload() method to add validation or processing:

   use Simtabi\Lapload\Traits\HasLapload;
   
   class MyComponent extends Component {
       use HasLapload;
   
       public function upload($files) {
           // Custom logic (e.g., resize, rename)
           foreach ($files as $file) {
               $file->storeAs('custom_path', $file->hashName());
           }
           $this->emit('uploaded');
       }
   }
   

3. Integration with Forms Combine with Laravel’s Form helper or Alpine.js for dynamic interactions:

   <livewire:lapload name="avatar" />
   <button wire:click="submitForm">Submit</button>
   

   public function submitForm() {
       $this->validate([
           'avatar.*' => 'image|max:1024',
       ]);
       // Process data...
   }
   

4. Dynamic Component Usage Pass dynamic props via Livewire’s wire:model or wire:key:

   <livewire:lapload
       name="dynamicUpload"
       :multiple="isMultiple"
       :size="maxSize"
   />
   

Gotchas and Tips

Pitfalls

1. Property Initialization

   • Forgetting to initialize $name as an array for multiple uploads:

     // Wrong: Will cause issues with array operations
     public $multipleImages;
     
     // Correct:
     public $multipleImages = [];
     

2. File Storage Quirks

   • Default storage is public disk. Ensure filesystem.php is configured:

     'disks' => [
         'public' => [
             'driver' => 'local',
             'root' => storage_path('app/public'),
             'url' => env('APP_URL').'/storage',
             'visibility' => 'public',
         ],
     ],
     

   • Symlink the storage directory:

     php artisan storage:link
     

3. Livewire Property Binding

   • If using wire:model, ensure the property name matches the name prop:

     <!-- Correct: Binds to $this->foo -->
     <livewire:lapload name="foo" />
     

Debugging

1. Check Uploaded Files Log the raw files in the upload() method:

   public function upload($files) {
       dd($files); // Debug uploaded files
   }
   

2. Validate File Types Extend the trait to enforce MIME types:

   public function upload($files) {
       foreach ($files as $file) {
           $this->validate([
               $file->getClientOriginalName() => 'image/jpeg|image/png',
           ]);
       }
   }
   

Extension Points

1. Custom Templates Override the Blade template by publishing views:

   php artisan vendor:publish --tag=lapload-views
   

   Modify resources/views/vendor/lapload/....

2. Event Listeners Emit custom events for upload progress:

   public function upload($files) {
       $this->emit('upload-progress', ['count' => count($files)]);
   }
   

   Listen in Blade:

   @this.on('upload-progress', (payload) => {
       console.log(payload.count);
   })
   

3. Presets for Reusability Create a base component for consistent uploads:

   class BaseUploadComponent extends Component {
       use HasLapload;
       public $images = [];
   
       public function render() {
           return view('components.base-upload');
       }
   }