getLocale()),
panelAspectRatio: {{ ($aspectRatio = $getPanelAspectRatio()) ? "'{$aspectRatio}'" : 'null' }},
panelLayout: {{ ($layout = $getPanelLayout()) ? "'{$layout}'" : 'null' }},
placeholder: @js($getPlaceholder()),
maxSize: {{ ($size = $getMaxSize()) ? "'{$size} KB'" : 'null' }},
minSize: {{ ($size = $getMinSize()) ? "'{$size} KB'" : 'null' }},
removeUploadedFileUsing: async (fileKey) => {
fileHasDeleted = true;
fileHasUploaded = false;
return await $wire.removeUploadedFile('{{ $getStatePath() }}', fileKey)
},
removeUploadedFileButtonPosition: '{{ $getRemoveUploadedFileButtonPosition() }}',
reorderUploadedFilesUsing: async (files) => {
return await $wire.reorderUploadedFiles('{{ $getStatePath() }}', files)
},
shouldAppendFiles: {{ $shouldAppendFiles() ? 'true' : 'false' }},
shouldTransformImage: {{ $shouldTransformImage ? 'true' : 'false' }},
state: $wire.{{ $applyStateBindingModifiers('entangle(\'' . $getStatePath() . '\')') }},
uploadButtonPosition: '{{ $getUploadButtonPosition() }}',
uploadProgressIndicatorPosition: '{{ $getUploadProgressIndicatorPosition() }}',
uploadUsing: (fileKey, file, success, error, progress) => {
$wire.upload(`{{ $getStatePath() }}.${fileKey}`, file, () => {
fileHasUploaded = true;
fileHasDeleted = false;
success(fileKey)
}, error, progress)
},
})"
wire:ignore
{!! ($id = $getId()) ? "id=\"{$id}\"" : null !!}
style="min-height: {{ $isAvatar() ? '8em' : ($getPanelLayout() === 'compact' ? '2.625em' : '4.75em') }}"
{{ $attributes->merge($getExtraAttributes())->class([
'filament-forms-file-upload-component',
'w-32 mx-auto' => $isAvatar(),
]) }}
{{ $getExtraAlpineAttributeBag() }}
>
@php
$uniquemodalevent = \Illuminate\Support\Str::of($getStatePath())->replace('.','')->replace('_','');
@endphp
!$isAvatar(),
"avatar w-32 cursor-pointer" => $isAvatar(),
])
type="file"
x-on:change = "function(){
var fileType = event.target.files[0]['type'];
if (!(fileType.search(`image`) >= 0)) {
new Notification()
.title('Error')
.danger()
.body('Selected file is not an valid image')
.send()
return;
}
$dispatch('on-cropper-modal-show-{{$uniquemodalevent}}', {
id: 'cropper-modal-{{ $getStatePath() }}',
files: event.target.files,
})
}" />