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

This commit is contained in:
guillaume91 2024-06-17 14:36:27 +02:00
parent 977366e621
commit 2d532d5aa8
3 changed files with 46 additions and 27 deletions

View file

@ -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) {
if ($value && $value != 'json') {
$fail('Not a json file');
'pivot_file.extension' => ['sometimes', function ($attribute, $value, $fail) use ($acceptedGeoJsonExtenstions) {
if ($value && !in_array($value, $acceptedGeoJsonExtenstions)) {
$fail('The upload field must have one of the following extensions: json, geojson or txt.');
}
}],
'span_file.extension' => ['sometimes', function ($attribute, $value, $fail) {
if ($value && $value != 'json') {
$fail('Not a json file');
'span_file.extension' => ['sometimes', function ($attribute, $value, $fail) use ($acceptedGeoJsonExtenstions) {
if ($value && !in_array($value, $acceptedGeoJsonExtenstions)) {
$fail('The upload field must have one of the following extensions: json, geojson or txt.');
}
}],
'harvest_file' => ['sometimes', new HarvestFile],

View file

@ -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"
}

View file

@ -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>