Merge pull request #1 from jhonoryza/change-impl-modelable

remove modelable impl change to event listener impl

Author: jhonoryza

.gitignore

@@ -1,2 +1,3 @@
 .DS_Store
-vendor/
+vendor/
+.idea/

README.md

@@ -1,14 +1,27 @@
-# Laravel Fileupload Component
+# Laravel File Upload Component
+
+laravel livewire file upload component
 
 ## Requirement
-- php 8.2
-- laravel 10
-- livewire 3
-- spatie/media-library
+- php v8.2
+- laravel v10
+- livewire v3
+- spatie/media-library v10
+
+## Installation
 
-## Usage
+```bash
+composer install jhonoryza/laravel-fileupload-component
+```
+
+```bash
+php artisan vendor:publish --provider=Jhonoryza\Component\FileUpload\FileUploadServiceProvider
+```
+
+## Quick Start
 
 prepare model, example Setting model
+
 ```php
 use Spatie\MediaLibrary\HasMedia;
 use Spatie\MediaLibrary\InteractsWithMedia;
@@ -27,51 +40,97 @@ class Setting extends Model implements HasMedia
 ```
 
 prepare livewire form class
+
 ```php
-    public $images = []; // property to store multiple images
+   /**
+    * property to store multiple images
+    */ 
+    public $images = []; 
+   
+   /**
+    * listener when there is onFileReplace event from the component
+    */ 
+   #[On('images:onFileReplace')]
+   public function replaceImages(array $images): void
+   {
+       $this->images = $images;
+   }
+
+   /**
+    * listener when there is onFileAdded event from the component
+    */ 
+   #[On('images:onFileAdded')]
+   public function addToImages(array $file): void
+   {
+       $this->images[$file['uuid']] = $file;
+   }
 
-    // form save function example
+   /**
+    * form save function example, setting is a Model
+    * we call syncFileUploadRequest function
+    * to save images to media library
+    */ 
     public function save()
     {
-        $this->setting->syncFileUploadRequest($this->images)
-                ->toMediaCollection('settings');
+        $this->setting
+            ->syncFileUploadRequest($this->images)
+            ->toMediaCollection('settings');
     }
 ```
 
-in create or edit form
+in create or edit livewire component
 ```php
     <livewire:file-upload-component
         name="images"
-        wire:model="images"
-        label="Gambar"
+        label="Image"
         :model="$setting"
         collection="settings"
         :multiple="true"
     />
 ```
 
-in view form
+in view livewire component
 ```php
     <livewire:file-upload-component
         name="images"
-        wire:model="images"
-        label="Gambar"
+        label="Image"
         :model="$setting"
         collection="settings"
         :multiple="true"
         :canUploadFile="false"
     />
 ```
 
+## Property Explanation
+- name is required and will affect what the event name is
+- :model you need to pass a variable with Model type that implement HasMedia
+- collection is for media collection name
+- :multiple for single file upload or multiple file upload
+- :canUploadFile to hide file selector
+
 ## Component Event
 
 this component dispatch 2 event when temporary upload is started
 - media:temporary-upload-started
 - media:temporary-upload-finished
 
-change media with the property name
+change `media` with the `name` property, example `name` property is images
+
+```php
+    <button
+        x-data="{ disable: false }"
+        x-bind:disabled="disable"
+        x-bind:style="disable ? 'cursor: not-allowed' : ''"
+        x-on:images:temporary-upload-started.window="disable = true"
+        x-on:images:temporary-upload-finished.window="disable = false"
+        type="submit" 
+        class="btn btn-primary"
+    >
+        Update Setting
+    </button>
+```
 
-## disable button when upload is started
+or you can listen to default livewire file upload event like this
 
 ```php
     <button
@@ -89,10 +148,30 @@ change media with the property name
     </button>
 ```
 
+another 2 event when the file is removed / loaded or added
+- media:onFileReplace
+- media:onFileAdded
+
+change `media` with the `name` property, example `name` property is images
+
+```php
+   #[On('images:onFileReplace')]
+   public function replaceImages(array $images): void
+   {
+       $this->images = $images;
+   }
+
+   #[On('images:onFileAdded')]
+   public function addToImages(array $file): void
+   {
+       $this->images[$file['uuid']] = $file;
+   }
+```
+
 ## next thing todo
-- test validation with error message
-- add unit test
-- bug when interacts with session flash after redirect (session flash data is missing)
+- [ ] test validation with error message
+- [ ] add unit test
+- [x] bug when interacts with session flash after redirect (session flash data is missing)
 
 ## Security