[fix] Settings -> geojson file input: Validators are now fixed. Leaflet doesn't break when you upload a wrong filetype.

laravel_app/app/Livewire/Projects/Tabs/Settings.php

@@ -168,6 +168,7 @@ private function resetFormData()
     private function validateForm()
     {
         $projectIdentifier = $this->formData['id'] ?? null;
+        $acceptedGeoJsonExtenstions = ['txt','json','geojson'];
 
         return  Validator::make([
             'name' => $this->formData['name'],
@@ -181,15 +182,14 @@ private function validateForm()
                 'string',
                 'max:255'
             ],
-            'pivot_file.extension' => ['sometimes', function ($attribute, $value, $fail) {
+            'pivot_file.extension' => ['sometimes', function ($attribute, $value, $fail) use ($acceptedGeoJsonExtenstions) {
-                if ($value && $value != 'json') {
+                if ($value && !in_array($value, $acceptedGeoJsonExtenstions)) {
-
+                    $fail('The upload field must have one of the following extensions: json, geojson or txt.');
-                    $fail('Not a json file');
                 }
             }],
-            'span_file.extension' => ['sometimes', function ($attribute, $value, $fail) {
+            'span_file.extension' => ['sometimes', function ($attribute, $value, $fail) use ($acceptedGeoJsonExtenstions) {
-                if ($value && $value != 'json') {
+                if ($value && !in_array($value, $acceptedGeoJsonExtenstions)) {
-                    $fail('Not a json file');
+                    $fail('The upload field must have one of the following extensions: json, geojson or txt.');
                 }
             }],
             'harvest_file' => ['sometimes', new HarvestFile],

laravel_app/public/build/manifest.json

@@ -57,7 +57,7 @@
     "dynamicImports": [
       "resources/js/alpine.js"
     ],
-    "file": "assets/app-a46f5c70.js",
+    "file": "assets/app-3ccb483c.js",
     "isEntry": true,
     "src": "resources/js/app.js"
   }

laravel_app/resources/views/livewire/projects/tabs/settings.blade.php

@@ -69,6 +69,7 @@
 
                 },
                 removeLayer(type){
+                    try{
                         window.geoJsonLayer.clearLayers();
                         switch(type){
                             case 'pivot_file':
@@ -83,7 +84,9 @@
                         if(window.mapLayers.length == 0) window.map.style.height='0px';
                         window.mapLayers.forEach((data) => this.updateLayer(data));
                         window.map.focus();
-
+                    }catch(e){
+                        console.debug('Not a geojson file, keep going.');
+                    }
                 }
              }"
      x-on:livewire-upload-finish.document="processFile($event.target.files[0],$event.target.closest('[id]').id);"
@@ -113,28 +116,44 @@
                     <div id="pivot_file">
                         <livewire:dropzone
                             wire:model="pivotFiles"
-                            :rules="['extensions:json,geojson','mimes:json,geojson']"
-                            :key="'pivotFiles'"
                             wire:key="'pivotFiles'"
                         />
                     </div>
                     @error('pivotFiles')
                     <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
                     @enderror
+                    @error('pivot_file.extension')
+                    <div class="bg-red-50 p-4 w-full mb-4 rounded dark:bg-red-600">
+                        <div class="flex gap-3 items-start">
+                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-red-400 dark:text-red-200">
+                                <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
+                            </svg>
+                            <h3 class="text-sm text-red-800 font-medium dark:text-red-100">{{ $message }}</h3>
+                        </div>
+                    </div>
+                    @enderror
                 </div>
                 <div class="flex flex-col mb-2 gap-2">
                     <p>{{__('Span GeoJSON file.')}}</p>
                     <div id="span_file">
                         <livewire:dropzone
                             wire:model="spanFiles"
-                            :rules="['extensions:json,geojson','mimes:json,geojson']"
-                            :key="'spanFiles'"
                             wire:key="'spanFiles'"
                         />
                     </div>
                     @error('spanFiles')
                     <span class="bg-red-200 text-red-500 p-0.5 mt-1 rounded">{{ $message }}</span>
                     @enderror
+                    @error('span_file.extension')
+                        <div class="bg-red-50 p-4 w-full mb-4 rounded dark:bg-red-600">
+                            <div class="flex gap-3 items-start">
+                                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5 text-red-400 dark:text-red-200">
+                                    <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.28 7.22a.75.75 0 00-1.06 1.06L8.94 10l-1.72 1.72a.75.75 0 101.06 1.06L10 11.06l1.72 1.72a.75.75 0 101.06-1.06L11.06 10l1.72-1.72a.75.75 0 00-1.06-1.06L10 8.94 8.28 7.22z" clip-rule="evenodd"></path>
+                                </svg>
+                                <h3 class="text-sm text-red-800 font-medium dark:text-red-100">{{ $message }}</h3>
+                            </div>
+                        </div>
+                    @enderror
                 </div>
                 <div class="flex flex-col mb-2 gap-2">
                     <p>{{__('Harvested Data file.')}}</p>