add ability to translate every string

Author: milewski

config/nova-filepond.php

@@ -1,6 +1,35 @@
 <?php
 
 return [
+    /**
+     * All the values will pass through the trans() function
+     */
+    'labels' => [
+        'decimalSeparator' => 'auto',
+        'thousandsSeparator' => 'auto',
+        'idle' => 'Drag & Drop your files or <span class="filepond--label-action"> Browse </span>',
+        'invalidField' => 'Field contains invalid files',
+        'fileWaitingForSize' => 'Waiting for size',
+        'fileSizeNotAvailable' => 'Size not available',
+        'fileLoading' => 'Loading',
+        'fileLoadError' => 'Error during load',
+        'fileProcessing' => 'Uploading',
+        'fileProcessingComplete' => 'Upload complete',
+        'fileProcessingAborted' => 'Upload cancelled',
+        'fileProcessingError' => 'Error during upload',
+        'fileProcessingRevertError' => 'Error during revert',
+        'fileRemoveError' => 'Error during remove',
+        'tapToCancel' => 'tap to cancel',
+        'tapToRetry' => 'tap to retry',
+        'tapToUndo' => 'tap to undo',
+        'buttonRemoveItem' => 'Remove',
+        'buttonAbortItemLoad' => 'Abort',
+        'buttonRetryItemLoad' => 'Retry',
+        'buttonAbortItemProcessing' => 'Cancel',
+        'buttonUndoItemProcessing' => 'Undo',
+        'buttonRetryItemProcessing' => 'Retry',
+        'buttonProcessItem' => 'Upload'
+    ],
     'doka' => [
 
         /**
@@ -18,18 +47,18 @@
             /**
              * Uncomment this to use a circular mask instead of a rectangular one
              */
-//            'cropMask' => <<<JAVASCRIPT
-//                            (root, setInnerHTML) => {
-//                                setInnerHTML(root, `
-//                                    <mask id="circular-mask">
-//                                        <rect x="0" y="0" width="100%" height="100%" fill="white"/>
-//                                        <circle cx="50%" cy="50%" r="50%" fill="black"/>
-//                                    </mask>
-//                                    <rect fill="rgba(255,255,255,.3125)" x="0" y="0" width="100%" height="100%" mask="url(#circular-mask)"/>
-//                                    <circle cx="50%" cy="50%" r="50%" fill="transparent" stroke-width="1" stroke="#fff"/>
-//                                `);
-//                            }
-//                            JAVASCRIPT,
+            //            'cropMask' => <<<JAVASCRIPT
+            //                            (root, setInnerHTML) => {
+            //                                setInnerHTML(root, `
+            //                                    <mask id="circular-mask">
+            //                                        <rect x="0" y="0" width="100%" height="100%" fill="white"/>
+            //                                        <circle cx="50%" cy="50%" r="50%" fill="black"/>
+            //                                    </mask>
+            //                                    <rect fill="rgba(255,255,255,.3125)" x="0" y="0" width="100%" height="100%" mask="url(#circular-mask)"/>
+            //                                    <circle cx="50%" cy="50%" r="50%" fill="transparent" stroke-width="1" stroke="#fff"/>
+            //                                `);
+            //                            }
+            //                            JAVASCRIPT,
             'cropShowSize' => true,
             'cropAspectRatioOptions' => [
                 [

dist/js/field.js

@@ -1,12 +1,11 @@
 <template>
 
     <file-pond
-            v-bind="$attrs"
+            v-bind="{ ...$attrs, ...field.labels }"
             ref="filepond"
             :style="cssVars"
             :name="nameField"
             :image-preview-height="field.multiple ? 150 : null"
-            :label-idle="__('Drop files here...')"
             :allow-multiple="field.multiple"
             :accepted-file-types="field.mimesTypes"
             :instant-upload="true"

resources/js/components/FilePondWrapper.vue

@@ -7,6 +7,7 @@
 use Illuminate\Http\File;
 use Illuminate\Support\Collection;
 use Illuminate\Support\Facades\Storage;
+use Illuminate\Support\Str;
 use Laravel\Nova\Fields\Field;
 use Laravel\Nova\Http\Controllers\ResourceShowController;
 use Laravel\Nova\Http\Requests\NovaRequest;
@@ -138,6 +139,11 @@ public function withDoka(array $options = []): self
         ]);
     }
 
+    public function labels(array $labels): self
+    {
+        return $this->withMeta([ 'labels' => $labels ]);
+    }
+
     /**
      * Disable Doka, you dont need to call this method if you haven't globally enabled it from the config file
      *
@@ -391,6 +397,19 @@ public static function getPathFromServerId(string $serverId): string
         return decrypt($serverId);
     }
 
+    private function getLabels(): Collection
+    {
+
+        $labels = collect(config('nova-filepond.labels', []))
+            ->merge($this->meta[ 'labels' ] ?? [])
+            ->mapWithKeys(function ($label, $key) {
+                return [ "label" . Str::title($key) => trans($label) ];
+            });
+
+        return $labels;
+
+    }
+
     /**
      * Prepare the field for JSON serialization.
      *
@@ -409,6 +428,7 @@ public function jsonSerialize()
             'limit' => null,
             'dokaOptions' => config('nova-filepond.doka.options'),
             'dokaEnabled' => config('nova-filepond.doka.enabled'),
+            'labels' => $this->getLabels(),
         ], $this->meta(), parent::jsonSerialize());
     }