{
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()),
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',
match ($getAlignment()) {
Alignment::Center, 'center' => 'justify-center',
Alignment::End, 'end' => 'justify-end',
Alignment::Left, 'left' => 'justify-left',
Alignment::Right, 'right' => 'justify-right',
Alignment::Start, 'start', null => 'justify-start',
},
])
}}
>
![]()
@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
$isAvatar,
'w-full' => ! $isAvatar,
])
>
merge([
'disabled' => $isDisabled,
'multiple' => $isMultiple(),
'type' => 'file',
], escape: false)
}}
/>
@if ($hasImageEditor && (! $isDisabled))
@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['iconHtml'] !!}
{{ $action['label'] }}
@endforeach
@endforeach
@if (count($aspectRatios = $getImageEditorAspectRatiosForJs()))
{{ __('filament-forms::components.file_upload.editor.aspect_ratios.label') }}
@foreach (collect($aspectRatios)->chunk(5) as $ratiosChunk)