{"record":{"id":"c5efef90fa3cfe29","repo":"filamentphp/filament","slug":"the-file-upload-editor-mode-must-be-either-1-2-or","errorCode":null,"errorMessage":"The file upload editor mode must be either 1, 2 or 3. [{$mode}] given, which is unsupported. See https://github.com/fengyuanchen/cropperjs/blob/v1/README.md#viewmode for more information on the available modes. Mode 0 is not supported, as it does not allow configuration via manual inputs.","messagePattern":"The file upload editor mode must be either 1, 2 or 3\\. \\[(.+?)\\] given, which is unsupported\\. See https://github\\.com/fengyuanchen/cropperjs/blob/v1/README\\.md#viewmode for more information on the available modes\\. Mode 0 is not supported, as it does not allow configuration via manual inputs\\.","errorType":"exception","errorClass":"InvalidArgumentException","httpStatus":null,"severity":"error","filePath":"packages/forms/src/Components/FileUpload.php","lineNumber":494,"sourceCode":"\n    public function imageEditorViewportWidth(int | Closure | null $width): static\n    {\n        $this->imageEditorViewportWidth = $width;\n\n        return $this;\n    }\n\n    public function imageEditorViewportHeight(int | Closure | null $height): static\n    {\n        $this->imageEditorViewportHeight = $height;\n\n        return $this;\n    }\n\n    public function imageEditorMode(int $mode): static\n    {\n        if (! in_array($mode, [1, 2, 3])) {\n            throw new InvalidArgumentException(\"The file upload editor mode must be either 1, 2 or 3. [{$mode}] given, which is unsupported. See https://github.com/fengyuanchen/cropperjs/blob/v1/README.md#viewmode for more information on the available modes. Mode 0 is not supported, as it does not allow configuration via manual inputs.\");\n        }\n\n        $this->imageEditorMode = $mode;\n\n        return $this;\n    }\n\n    public function imageEditorEmptyFillColor(string | Closure | null $color): static\n    {\n        $this->imageEditorEmptyFillColor = $color;\n\n        return $this;\n    }\n\n    /**\n     * @param  array<string | null> | Closure  $ratios\n     */\n    public function imageEditorAspectRatioOptions(array | Closure $ratios): static","sourceCodeStart":476,"sourceCodeEnd":512,"githubUrl":"https://github.com/filamentphp/filament/blob/53483fa9340e4ec637985fe454ebb58afb92ea24/packages/forms/src/Components/FileUpload.php#L476-L512","documentation":"FileUpload's image editor is powered by cropperjs v1's `viewMode`, and Filament only accepts 1, 2, or 3. Mode 0 is explicitly rejected because an unconstrained crop box cannot be represented in the editor's manual numeric inputs (offset/size), which Filament uses to make cropping keyboard-accessible. `imageEditorMode()` validates eagerly, so the InvalidArgumentException fires at configuration time.","triggerScenarios":"Calling `->imageEditorMode(0)` or `->imageEditorMode(4)` (any int outside 1–3) on a FileUpload field.","commonSituations":"Porting a cropperjs config from another app where `viewMode: 0` is the default, or copying values from cropperjs docs rather than Filament's.","solutions":["Choose a supported mode: `->imageEditorMode(1)` restricts the crop box to the canvas; 2 and 3 add stricter constraints.","When migrating a cropperjs config, map `viewMode: 0` to `1`."],"exampleFix":"// before\nFileUpload::make('avatar')->imageEditorMode(0),\n\n// after\nFileUpload::make('avatar')->imageEditorMode(1),","handlingStrategy":"validation","validationCode":"$mode = $config['image_editor_mode'] ?? 1;\n\nif (! in_array($mode, [1, 2, 3], true)) {\n    throw new InvalidArgumentException(\"imageEditorMode must be 1, 2 or 3; got [{$mode}].\");\n}\n\n$field->imageEditorMode($mode);","typeGuard":"function isSupportedImageEditorMode(int $mode): bool\n{\n    return in_array($mode, [1, 2, 3], true);\n}","tryCatchPattern":null,"preventionTips":["Map any migrated cropperjs viewMode of 0 up to 1.","Keep editor mode in validated config rather than inline literals.","Read Filament's FileUpload docs, not cropperjs's, for the accepted range."],"tags":["filament","file-upload","image-editor","cropperjs","validation"],"backgroundTag":"invalid-enum-argument","analyzedSha":"53483fa9340e4ec637985fe454ebb58afb92ea24","analyzedAt":"2026-08-17T02:06:23.049Z","schemaVersion":2},"datasetVersion":"2026-08-17T04:17:16.089Z"}