{
return await $wire.removeFormUploadedFile(@js($statePath), fileKey)
},
removeUploadedFileButtonPosition: @js($getRemoveUploadedFileButtonPosition()),
reorderUploadedFilesUsing: async (files) => {
return await $wire.reorderFormUploadedFiles(@js($statePath), files)
},
shouldAppendFiles: @js($shouldAppendFiles()),
shouldOrientImageFromExif: @js($shouldOrientImagesFromExif()),
shouldTransformImage: @js($imageCropAspectRatio || $imageResizeTargetHeight || $imageResizeTargetWidth),
state: $wire.{{ $applyStateBindingModifiers("\$entangle('{$statePath}')") }},
uploadButtonPosition: @js($getUploadButtonPosition()),
uploadingMessage: @js($getUploadingMessage()),
uploadProgressIndicatorPosition: @js($getUploadProgressIndicatorPosition()),
uploadUsing: (fileKey, file, success, error, progress) => {
$wire.upload(
`{{ $statePath }}.${fileKey}`,
file,
() => {
success(fileKey)
},
error,
(progressEvent) => {
progress(true, progressEvent.detail.progress, 100)
},
)
},
})"
wire:ignore
x-ignore
{{
$attributes
->merge([
'id' => $getId(),
], escape: false)
->merge($getExtraAttributes(), escape: false)
->merge($getExtraAlpineAttributes(), escape: false)
->class([
'fi-fo-file-upload flex flex-col gap-y-2 [&_.filepond--root]:font-sans',
match ($alignment) {
Alignment::Start, Alignment::Left => 'items-start',
Alignment::Center => 'items-center',
Alignment::End, Alignment::Right => 'items-end',
default => $alignment,
},
])
}}
>
$isAvatar,
'w-full' => ! $isAvatar,
])
>
merge([
'disabled' => $isDisabled,
'multiple' => $isMultiple(),
'type' => 'file',
], escape: false)
}}
/>
@if ($hasImageEditor && (! $isDisabled))
$hasCircleCropper,
])
>
![]()
@foreach ($ratiosChunk as $label => $ratio)
{{ $label }}
@endforeach
@endforeach
@endif
{{ __('filament-forms::components.file_upload.editor.actions.cancel.label') }}
{{ __('filament-forms::components.file_upload.editor.actions.reset.label') }}
{{ __('filament-forms::components.file_upload.editor.actions.save.label') }}
@endif
@foreach ([
[
'label' => __('filament-forms::components.file_upload.editor.fields.x_position.label'),
'ref' => 'xPositionInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.x_position.unit'),
'alpineSaveHandler' => 'editor.setData({...editor.getData(true), x: +$el.value})',
],
[
'label' => __('filament-forms::components.file_upload.editor.fields.y_position.label'),
'ref' => 'yPositionInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.y_position.unit'),
'alpineSaveHandler' => 'editor.setData({...editor.getData(true), y: +$el.value})',
],
[
'label' => __('filament-forms::components.file_upload.editor.fields.width.label'),
'ref' => 'widthInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.width.unit'),
'alpineSaveHandler' => 'editor.setData({...editor.getData(true), width: +$el.value})',
],
[
'label' => __('filament-forms::components.file_upload.editor.fields.height.label'),
'ref' => 'heightInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.height.unit'),
'alpineSaveHandler' => 'editor.setData({...editor.getData(true), height: +$el.value})',
],
[
'label' => __('filament-forms::components.file_upload.editor.fields.rotation.label'),
'ref' => 'rotationInput',
'unit' => __('filament-forms::components.file_upload.editor.fields.rotation.unit'),
'alpineSaveHandler' => 'editor.rotateTo(+$el.value)',
],
] as $input)
@endforeach
@foreach ($getImageEditorActions(iconSizeClasses: 'h-5 w-5 mx-auto') as $groupedActions)
@foreach ($groupedActions as $action)
{{ $action['label'] }}
@endforeach
@endforeach
@if (count($aspectRatios = $getImageEditorAspectRatiosForJs()))
{{ __('filament-forms::components.file_upload.editor.aspect_ratios.label') }}
@foreach (collect($aspectRatios)->chunk(5) as $ratiosChunk)