rule Image detects supported images

Author: dg

src/Forms/Controls/UploadControl.php

@@ -105,7 +105,7 @@ public function isOk(): bool
 	public function addRule($validator, $errorMessage = null, $arg = null)
 	{
 		if ($validator === Form::Image) {
-			$this->control->accept = implode(', ', FileUpload::IMAGE_MIME_TYPES);
+			$this->control->accept = implode(', ', Forms\Helpers::getSupportedImages());
 
 		} elseif ($validator === Form::MimeType) {
 			$this->control->accept = implode(', ', (array) $arg);

src/Forms/Helpers.php

@@ -293,4 +293,18 @@ public static function getSingleType($reflection): ?string
 			);
 		}
 	}
+
+
+	/** @internal */
+	public static function getSupportedImages(): array
+	{
+		$flag = imagetypes();
+		return array_filter([
+			$flag & IMG_GIF ? 'image/gif' : null,
+			$flag & IMG_JPG ? 'image/jpeg' : null,
+			$flag & IMG_PNG ? 'image/png' : null,
+			$flag & IMG_WEBP ? 'image/webp' : null,
+			$flag & 256 ? 'image/avif' : null, // IMG_AVIF
+		]);
+	}
 }

src/Forms/Rules.php

@@ -88,9 +88,9 @@ public function addRule($validator, $errorMessage = null, $arg = null)
 		$rule = new Rule;
 		$rule->control = $this->control;
 		$rule->validator = $validator;
-		$this->adjustOperation($rule);
 		$rule->arg = $arg;
 		$rule->message = $errorMessage;
+		$this->adjustOperation($rule);
 		if ($rule->validator === Form::Filled) {
 			$this->required = $rule;
 		} else {
@@ -339,6 +339,10 @@ private function adjustOperation(Rule $rule): void
 			}
 		}
 
+		if ($rule->validator === Form::Image) {
+			$rule->arg = Helpers::getSupportedImages();
+		}
+
 		if (!is_callable($this->getCallback($rule))) {
 			$validator = is_scalar($rule->validator)
 				? " '$rule->validator'"

src/assets/netteForms.js

@@ -548,7 +548,7 @@
 		},
 
 		image: function (elem, arg, val) {
-			return Nette.validators.mimeType(elem, ['image/gif', 'image/png', 'image/jpeg', 'image/webp'], val);
+			return Nette.validators.mimeType(elem, arg || ['image/gif', 'image/png', 'image/jpeg', 'image/webp'], val);
 		},
 
 		'static': function (elem, arg) {

tests/Forms/Controls.UploadControl.render.phpt

@@ -71,7 +71,7 @@ test('accepted files', function () {
 	Assert::match('<input type="file" name="file2" accept="image/*, text/html" id="frm-file2" data-nette-rules=\'[{"op":":fileSize",%a%},{"op":":mimeType","msg":"The uploaded file is not in the expected format.","arg":["image/*","text/html"]}]\'>', (string) $input->getControl());
 
 	$input = $form->addUpload('file3')->addRule(Form::Image);
-	Assert::match('<input type="file" name="file3" accept="image/gif, image/png, image/jpeg, image/webp" id="frm-file3" data-nette-rules=\'[{"op":":fileSize",%a%},{"op":":image","msg":"The uploaded file must be image in format JPEG, GIF, PNG or WebP."}]\'>', (string) $input->getControl());
+	Assert::match('<input type="file" name="file3" accept="image/gif, image/jpeg, image/png, image/webp%a?%" id="frm-file3" data-nette-rules=\'[{"op":":fileSize",%a%},{"op":":image","msg":"The uploaded file must be image in format JPEG, GIF, PNG or WebP.","arg":["image/gif","image/jpeg","image/png","image/webp"%a?%]}]\'>', (string) $input->getControl());
 });
 
 

tests/Forms/Forms.renderer.1.expect

@@ -81,7 +81,7 @@
 <tr class="required">
 	<th><label for="frm-password" class="required">Choose password:</label></th>
 
-	<td><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text"><input type="file" name="avatar" id="frm-avatar" data-nette-rules='[{"op":":fileSize","msg":"The size of the uploaded file can be up to %d% bytes.","arg":%d%},{"op":":filled","rules":[{"op":":image","msg":"Uploaded file is not image"}],"control":"avatar"}]' class="text">
+	<td><input type="password" name="password" id="frm-password" required data-nette-rules='[{"op":":filled","msg":"Choose your password"},{"op":":minLength","msg":"The password is too short: it must be at least 3 characters","arg":3}]' class="text"><input type="password" name="password2" id="frm-password2" data-nette-rules='[{"op":":valid","rules":[{"op":":filled","msg":"Reenter your password"},{"op":":equal","msg":"Passwords do not match","arg":{"control":"password"}}],"control":"password"}]' class="text"><input type="file" name="avatar" id="frm-avatar" data-nette-rules='[{"op":":fileSize","msg":"The size of the uploaded file can be up to %d% bytes.","arg":%d%},{"op":":filled","rules":[{"op":":image","msg":"Uploaded file is not image","arg":["image/gif","image/jpeg","image/png","image/webp"%a?%]}],"control":"avatar"}]' class="text">
 	<span class="error">Reenter your password</span></td>
 </tr>