diff --git a/packages/forms/docs/10-rich-editor.md b/packages/forms/docs/10-rich-editor.md index 0db3c9ba5a..f4cbcbe52f 100644 --- a/packages/forms/docs/10-rich-editor.md +++ b/packages/forms/docs/10-rich-editor.md @@ -225,6 +225,26 @@ RichContentRenderer::make($record->content) ->toHtml() ``` +### Validating uploaded images + +You may use the `fileAttachmentsAcceptedFileTypes()` method to control a list of accepted mime types for uploaded images. By default, `image/png`, `image/jpeg`, `image/gif`, and `image/webp` are accepted: + +```php +use Filament\Forms\Components\RichEditor; + +RichEditor::make('content') + ->fileAttachmentsAcceptedFileTypes(['image/png', 'image/jpeg']) +``` + +You may use the `fileAttachmentsMaxSize()` method to control the maximum file size for uploaded images. The size is specified in kilobytes. By default, the maximum size is 12288 KB (12 MB): + +```php +use Filament\Forms\Components\RichEditor; + +RichEditor::make('content') + ->fileAttachmentsMaxSize(5120) // 5 MB +``` + ## Using custom blocks Custom blocks are elements that users can drag and drop into the rich editor. You can define custom blocks that user can insert into the rich editor using the `customBlocks()` method: diff --git a/packages/forms/docs/11-markdown-editor.md b/packages/forms/docs/11-markdown-editor.md index c7b0852993..19df7115ef 100644 --- a/packages/forms/docs/11-markdown-editor.md +++ b/packages/forms/docs/11-markdown-editor.md @@ -60,3 +60,23 @@ MarkdownEditor::make('content') ``` As well as allowing static values, the `fileAttachmentsDisk()` and `fileAttachmentsDirectory()` methods also accept functions to dynamically calculate them. You can inject various utilities into the function as parameters. + +### Validating uploaded images + +You may use the `fileAttachmentsAcceptedFileTypes()` method to control a list of accepted mime types for uploaded images. By default, `image/png`, `image/jpeg`, `image/gif`, and `image/webp` are accepted: + +```php +use Filament\Forms\Components\MarkdownEditor; + +MarkdownEditor::make('content') + ->fileAttachmentsAcceptedFileTypes(['image/png', 'image/jpeg']) +``` + +You may use the `fileAttachmentsMaxSize()` method to control the maximum file size for uploaded images. The size is specified in kilobytes. By default, the maximum size is 12288 KB (12 MB): + +```php +use Filament\Forms\Components\MarkdownEditor; + +MarkdownEditor::make('content') + ->fileAttachmentsMaxSize(5120) // 5 MB +``` diff --git a/packages/forms/resources/js/components/rich-editor/extension-local-files.js b/packages/forms/resources/js/components/rich-editor/extension-local-files.js index 0ee72bf2f3..45d7004141 100644 --- a/packages/forms/resources/js/components/rich-editor/extension-local-files.js +++ b/packages/forms/resources/js/components/rich-editor/extension-local-files.js @@ -19,11 +19,11 @@ const validateFiles = ({ maxSizeValidationMessage, }) => { for (const file of files) { - if (!acceptedTypes.includes(file.type)) { + if (acceptedTypes && acceptedTypesValidationMessage && (!acceptedTypes.includes(file.type))) { return acceptedTypesValidationMessage } - if (file.size > +maxSize * 1024) { + if (maxSize && maxSizeValidationMessage && (file.size > ((+maxSize) * 1024))) { return maxSizeValidationMessage } } diff --git a/packages/forms/resources/lang/en/components.php b/packages/forms/resources/lang/en/components.php index 782b5ab957..ee7180af76 100644 --- a/packages/forms/resources/lang/en/components.php +++ b/packages/forms/resources/lang/en/components.php @@ -284,6 +284,10 @@ return [ 'markdown_editor' => [ + 'file_attachments_accepted_file_types_message' => 'Uploaded files must be of type: :values.', + + 'file_attachments_max_size_message' => 'Uploaded files must not be greater than :max kilobytes.', + 'tools' => [ 'attach_files' => 'Attach files', 'blockquote' => 'Blockquote', diff --git a/packages/forms/resources/views/components/markdown-editor.blade.php b/packages/forms/resources/views/components/markdown-editor.blade.php index 8500067076..32b46e1d68 100644 --- a/packages/forms/resources/views/components/markdown-editor.blade.php +++ b/packages/forms/resources/views/components/markdown-editor.blade.php @@ -4,6 +4,8 @@ $extraAttributeBag = $getExtraAttributeBag(); $key = $getKey(); $statePath = $getStatePath(); + $fileAttachmentsMaxSize = $getFileAttachmentsMaxSize(); + $fileAttachmentsAcceptedFileTypes = $getFileAttachmentsAcceptedFileTypes(); @endphp @@ -37,6 +39,20 @@ toolbarButtons: @js($getToolbarButtons()), translations: @js(__('filament-forms::components.markdown_editor')), uploadFileAttachmentUsing: async (file, onSuccess, onError) => { + const acceptedTypes = @js($fileAttachmentsAcceptedFileTypes); + const acceptedTypesValidationMessage = @js($fileAttachmentsAcceptedFileTypes ? __('filament-forms::components.markdown_editor.file_attachments_accepted_file_types_message', ['values' => implode(', ', $fileAttachmentsAcceptedFileTypes)]) : null) + + if (acceptedTypes && acceptedTypesValidationMessage && (!acceptedTypes.includes(file.type))) { + return onError(acceptedTypesValidationMessage) + } + + const maxSize = @js($fileAttachmentsMaxSize); + const maxSizeValidationMessage = @js($fileAttachmentsMaxSize ? trans_choice('filament-forms::components.markdown_editor.file_attachments_max_size_message', $fileAttachmentsMaxSize, ['max' => $fileAttachmentsMaxSize]) : null) + + if (maxSize && maxSizeValidationMessage && (file.size > ((+maxSize) * 1024))) { + return onError(maxSizeValidationMessage) + } + $wire.upload(`componentFileAttachments.{{ $statePath }}`, file, () => { $wire .callSchemaComponentMethod( diff --git a/packages/forms/src/Components/Concerns/HasFileAttachments.php b/packages/forms/src/Components/Concerns/HasFileAttachments.php index ebe89c07c4..405e716d92 100644 --- a/packages/forms/src/Components/Concerns/HasFileAttachments.php +++ b/packages/forms/src/Components/Concerns/HasFileAttachments.php @@ -32,7 +32,7 @@ trait HasFileAttachments */ protected array | Arrayable | Closure | null $fileAttachmentsAcceptedFileTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp']; - protected int | Closure | null $fileAttachmentsMaxSize = null; + protected int | Closure | null $fileAttachmentsMaxSize = 12288; public function fileAttachmentsDirectory(string | Closure | null $directory): static {