Allow Server Side validation during upload (#25)

* Allow Server Side validation during upload

* Multiple file upload needs a reset

* Update README.md

* Update README.md

---------

Co-authored-by: Sébastien Morel <[email protected]>

README.md

@@ -105,6 +105,35 @@ App::setLocale('id'); // change to Indonesian for example
 ```
 The last method can be used to change the locale on the fly. Like when a user changes the language (You need to implement this yourself).
 
+## Server Side Validation on upload
+
+Optionally, you can validate the uploaded file immediately. This is useful to inform the user of an error and process file uploads without requiring the user to click a button.
+
+```php
+use Livewire\Component;
+use Spatie\LivewireFilepond\WithFilePond;
+
+class MyLivewireComponent extends Component
+{
+    use WithFilePond;
+
+    public $file;
+
+    public function rules(): array
+    {
+        return [
+            'file' => 'required|mimetypes:image/jpg,image/jpeg,image/png|max:3000',
+        ];
+    }
+    public function validateUploadedFile()
+    {
+        $this->validate();
+
+        return true;
+    }
+}
+```
+
 ## Publishing assets
 
 Livewire Filepond automatically loads the scripts through an endpoint. If you want to serve the assets directly, you can publish them:

resources/views/upload.blade.php

@@ -59,9 +59,18 @@ class="{{ $attributes->get('class') }}"
           server: {
               process: async (fieldName, file, metadata, load, error, progress) => {
                   $dispatch('filepond-upload-started', '{{ $wireModelAttribute }}');
-                  await @this.upload('{{ $wireModelAttribute }}', file, (response) => {
-                      load(response);
-                      $dispatch('filepond-upload-finished', {'{{ $wireModelAttribute }}': response });
+                  await @this.upload('{{ $wireModelAttribute }}', file, async (response) => {
+                    let validationResult  = await @this.call('validateUploadedFile', response);
+                        // Check server validation result
+                        if (validationResult === true) {
+                            // File is valid, dispatch the upload-finished event
+                            load(response);
+                            $dispatch('filepond-upload-finished', { '{{ $wireModelAttribute }}': response });
+                        } else {
+                            // Throw error after validating server side
+                            error('Filepond Api Ignores This Message');
+                            $dispatch('filepond-upload-reset', '{{ $wireModelAttribute }}');
+                        }
                   }, error, progress);
               },
               revert: async (filename, load) => {

src/WithFilePond.php

@@ -62,6 +62,14 @@ public function revert($property, $filename): void
         app(LivewireManager::class)->updateProperty($this, $property, $newFiles);
     }
 
+    /**
+     * Default returns true, override in your component
+     */
+    public function validateUploadedFile(): bool
+    {
+        return true;
+    }
+
     public function resetFilePond(string $property): void
     {
         $this->reset($property);