Fixes #4566: Added client validation support for image validator

apps/advanced/init

@@ -184,7 +184,7 @@ function setExecutable($root, $paths)
 function setCookieValidationKey($root, $paths)
 {
     foreach ($paths as $file) {
-        echo "      generating cookie validation key $file\n";
+        echo "   generate cookie validation key in $file\n";
         $file = $root . '/' . $file;
         $length = 32;
         $bytes = mcrypt_create_iv($length, MCRYPT_DEV_URANDOM);

framework/CHANGELOG.md

@@ -168,6 +168,7 @@ Yii Framework 2 Change Log
 - Enh #4436: Added callback functions to AJAX-based form validation (thiagotalma)
 - Enh #4485: Added support for deferred validation in `ActiveForm` (Alex-Code)
 - Enh #4520: Added sasl support to `yii\caching\MemCache` (xjflyttp)
+- Enh #4566: Added client validation support for image validator (Skysplit, qiangxue)
 - Enh: Added support for using sub-queries when building a DB query with `IN` condition (qiangxue)
 - Enh: Supported adding a new response formatter without the need to reconfigure existing formatters (qiangxue)
 - Enh: Added `yii\web\UrlManager::addRules()` to simplify adding new URL rules (qiangxue)

framework/assets/yii.validation.js

@@ -69,112 +69,49 @@ yii.validation = (function ($) {
             }
         },
         
-        globalFiles: function(files, messages, options) {
-            if (options.message && !files) {
-                pub.addMessage(messages, options.message);
-            }
-            
-            if (files.length === 0) {
-                if (!options.skipOnEmpty) {
-                    pub.addMessage(messages, options.uploadRequired);
-                }
-                return false;
-            }
-       
-            if (options.maxFiles && options.maxFiles < files.length) {
-                pub.addMessage(messages, options.tooMany);
-            }
-            
-            return true;
-        },
-        
-        singleFile: function(file, messages, options) {
-            var index, ext;
-            
-            if (options.extensions && options.extensions.length > 0) {
-                    index = file.name.lastIndexOf('.');
-
-                    if (!~index) {
-                        ext = '';
-                    } else {
-                        ext = file.name.substr(index + 1, file.name.length).toLowerCase();
-                    }
-
-                    if (!~options.extensions.indexOf(ext)) {
-                        pub.addMessage(messages, options.wrongExtension.replace(/\{file\}/g, file.name));
-                    }
-                }
-
-                if (options.mimeTypes && options.mimeTypes.length > 0) {
-                    if (!~options.mimeTypes.indexOf(file.type)) {
-                        pub.addMessage(messages, options.wrongMimeType.replace(/\{file\}/g, file.name));
-                    }
-                }
-
-                if (options.maxSize && options.maxSize < file.size) {
-                    pub.addMessage(messages, options.tooBig.replace(/\{file\}/g, file.name));
-                }
-
-                if (options.maxSize && options.minSize > file.size) {
-                    pub.addMessage(messages, options.tooSmall.replace(/\{file\}/g, file.name));
-                }
-        },
-
-        file: function (messages, options, attribute) {
-            var files = $(attribute.input).get(0).files,
-                self = this;
-
-            if ( !self.globalFiles(files, messages, options) ) {
-                return;
-            }
-
+        file: function (attribute, messages, options) {
+            var files = getFiles(attribute, messages, options);
             $.each(files, function (i, file) {
-                self.singleFile(file, messages, options);
+                validateFile(file, messages, options);
             });
         },
         
-        image: function (messages, options, deferred, attribute) {
-            var files = $(attribute.input).get(0).files,
-                self = this;
-        
-            if ( !self.globalFiles(files, messages, options) ) {
-                return;
-            }
+        image: function (attribute, messages, options, deferred) {
+            var files = getFiles(attribute, messages, options);
             
             $.each(files, function (i, file) {
-                // Perform file validation
-                self.singleFile(file, messages, options);
-                
+                validateFile(file, messages, options);
+
                 // Skip image validation if FileReader API is not available
                 if (typeof FileReader === "undefined") {
                     return;
                 }
-                
+
                 var def = $.Deferred(),
                     fr = new FileReader(),
                     img = new Image();
                     
                 img.onload = function () {
                     if (options.minWidth && this.width < options.minWidth) {
-                        pub.addMessage(messages, options.underWidth.replace(/\{file\}/g, file.name));
+                        messages.push(options.underWidth.replace(/\{file\}/g, file.name));
                     }
                     
                     if (options.maxWidth && this.width > options.maxWidth) {
-                        pub.addMessage(messages, options.overWidth.replace(/\{file\}/g, file.name));
+                        messages.push(options.overWidth.replace(/\{file\}/g, file.name));
                     }
                     
                     if (options.minHeight && this.height < options.minHeight) {
-                        pub.addMessage(messages, options.underHeight.replace(/\{file\}/g, file.name));
+                        messages.push(options.underHeight.replace(/\{file\}/g, file.name));
                     }
                     
                     if (options.maxHeight && this.height > options.maxHeight) {
-                        pub.addMessage(messages, options.overHeight.replace(/\{file\}/g, file.name));
+                        messages.push(options.overHeight.replace(/\{file\}/g, file.name));
                     }
                     def.resolve();
                 };
                 
                 img.onerror = function () {
-                    pub.addMessage(messages, options.notImage);
+                    messages.push(options.notImage);
                     def.resolve();
                 };
                 
@@ -363,5 +300,60 @@ yii.validation = (function ($) {
             }
         }
     };
+
+    function getFiles(attribute, messages, options) {
+        var files = $(attribute.input).get(0).files;
+        if (!files) {
+            messages.push(options.message);
+            return [];
+        }
+
+        if (files.length === 0) {
+            if (!options.skipOnEmpty) {
+                messages.push(options.uploadRequired);
+            }
+            return [];
+        }
+
+        if (options.maxFiles && options.maxFiles < files.length) {
+            messages.push(options.tooMany);
+            return [];
+        }
+
+        return files;
+    }
+
+    function validateFile(file, messages, options) {
+        if (options.extensions && options.extensions.length > 0) {
+            var index, ext;
+
+            index = file.name.lastIndexOf('.');
+
+            if (!~index) {
+                ext = '';
+            } else {
+                ext = file.name.substr(index + 1, file.name.length).toLowerCase();
+            }
+
+            if (!~options.extensions.indexOf(ext)) {
+                messages.push(options.wrongExtension.replace(/\{file\}/g, file.name));
+            }
+        }
+
+        if (options.mimeTypes && options.mimeTypes.length > 0) {
+            if (!~options.mimeTypes.indexOf(file.type)) {
+                messages.push(options.wrongMimeType.replace(/\{file\}/g, file.name));
+            }
+        }
+
+        if (options.maxSize && options.maxSize < file.size) {
+            messages.push(options.tooBig.replace(/\{file\}/g, file.name));
+        }
+
+        if (options.minSize && options.minSize > file.size) {
+            messages.push(options.tooSmall.replace(/\{file\}/g, file.name));
+        }
+    }
+
     return pub;
 })(jQuery);

framework/validators/FileValidator.php

@@ -123,8 +123,6 @@ class FileValidator extends Validator
      */
     public $wrongMimeType;
     
-    protected $_clientOptions;
-
 
     /**
      * @inheritdoc
@@ -152,12 +150,16 @@ class FileValidator extends Validator
         }
         if (!is_array($this->extensions)) {
             $this->extensions = preg_split('/[\s,]+/', strtolower($this->extensions), -1, PREG_SPLIT_NO_EMPTY);
+        } else {
+            $this->extensions = array_map('strtolower', $this->extensions);
         }
         if ($this->wrongMimeType === null) {
             $this->wrongMimeType = Yii::t('yii', 'Only files with these MIME types are allowed: {mimeTypes}.');
         }
         if (!is_array($this->mimeTypes)) {
             $this->mimeTypes = preg_split('/[\s,]+/', strtolower($this->mimeTypes), -1, PREG_SPLIT_NO_EMPTY);
+        } else {
+            $this->mimeTypes = array_map('strtolower', $this->mimeTypes);
         }
     }
 
@@ -334,22 +336,35 @@ class FileValidator extends Validator
      */
     public function clientValidateAttribute($object, $attribute, $view)
     {
+        ValidationAsset::register($view);
+        $options = $this->getClientOptions($object, $attribute);
+        return 'yii.validation.file(attribute, messages, ' . json_encode($options) . ');';
+    }
+
+    /**
+     * Returns the client side validation options.
+     * @param \yii\base\Model $object the model being validated
+     * @param string $attribute the attribute name being validated
+     * @return array the client side validation options
+     */
+    protected function getClientOptions($object, $attribute)
+    {
         $label = $object->getAttributeLabel($attribute);
-        
+
         if ( $this->message !== null ){
             $options['message'] = Yii::$app->getI18n()->format($this->message, [
                 'attribute' => $label,
             ], Yii::$app->language);
         }
-        
+
         $options['skipOnEmpty'] = $this->skipOnEmpty;
-        
-        if ( !$this->skipOnEmpty ) {    
+
+        if ( !$this->skipOnEmpty ) {
             $options['uploadRequired'] = Yii::$app->getI18n()->format($this->uploadRequired, [
                 'attribute' => $label,
             ], Yii::$app->language);
         }
-        
+
         if ( $this->mimeTypes !== null ) {
             $options['mimeTypes'] = $this->mimeTypes;
             $options['wrongMimeType'] = Yii::$app->getI18n()->format($this->wrongMimeType, [
@@ -357,7 +372,7 @@ class FileValidator extends Validator
                 'mimeTypes' => join(', ', $this->mimeTypes)
             ], Yii::$app->language);
         }
-        
+
         if ( $this->extensions !== null ) {
             $options['extensions'] = $this->extensions;
             $options['wrongExtension'] = Yii::$app->getI18n()->format($this->wrongExtension, [
@@ -365,7 +380,7 @@ class FileValidator extends Validator
                 'extensions' => join(', ', $this->extensions)
             ], Yii::$app->language);
         }
-        
+
         if ( $this->minSize !== null ) {
             $options['minSize'] = $this->minSize;
             $options['tooSmall'] = Yii::$app->getI18n()->format($this->tooSmall, [
@@ -373,15 +388,15 @@ class FileValidator extends Validator
                 'limit' => $this->minSize
             ], Yii::$app->language);
         }
-        
+
         if ( $this->maxSize !== null ) {
             $options['maxSize'] = $this->maxSize;
             $options['tooBig'] = Yii::$app->getI18n()->format($this->tooBig, [
                 'attribute' => $label,
                 'limit' => $this->maxSize
-            ], Yii::$app->language); 
-       }
-        
+            ], Yii::$app->language);
+        }
+
         if ( $this->maxFiles !== null ) {
             $options['maxFiles'] = $this->maxFiles;
             $options['tooMany'] = Yii::$app->getI18n()->format($this->tooMany, [
@@ -389,12 +404,7 @@ class FileValidator extends Validator
                 'limit' => $this->maxFiles
             ], Yii::$app->language);
         }
-        
-        ValidationAsset::register($view);
-        
-        // Store options for ImageValidator
-        $this->_clientOptions = $options;
-        
-        return 'yii.validation.file(messages, ' . json_encode($options) . ', attribute);';
+
+        return $options;
     }
 }

framework/validators/ImageValidator.php

@@ -134,7 +134,7 @@ class ImageValidator extends FileValidator
             return [$this->notImage, ['file' => $image->name]];
         }
 
-        list($width, $height, $type) = $imageInfo;
+        list($width, $height) = $imageInfo;
 
         if ($width == 0 || $height == 0) {
             return [$this->notImage, ['file' => $image->name]];
@@ -158,57 +158,64 @@ class ImageValidator extends FileValidator
 
         return null;
     }
-    
+
     /**
      * @inheritdoc
      */
     public function clientValidateAttribute($object, $attribute, $view)
     {
-        parent::clientValidateAttribute($object, $attribute, $view);
-        
+        ValidationAsset::register($view);
+        $options = $this->getClientOptions($object, $attribute);
+        return 'yii.validation.image(attribute, messages, ' . json_encode($options) . ', deferred);';
+    }
+
+    /**
+     * @inheritdoc
+     */
+    protected function getClientOptions($object, $attribute)
+    {
+        $options = parent::getClientOptions($object, $attribute);
+
         $label = $object->getAttributeLabel($attribute);
-        
-        // Inherit client options from FileValidator
-        $options = $this->_clientOptions;
-        
-        if ( $this->notImage !== null ) {
+
+        if ($this->notImage !== null) {
             $options['notImage'] = Yii::$app->getI18n()->format($this->notImage, [
                 'attribute' => $label
             ], Yii::$app->language);
         }
-        
-        if ( $this->minWidth !== null ) {
+
+        if ($this->minWidth !== null) {
             $options['minWidth'] = $this->minWidth;
             $options['underWidth'] = Yii::$app->getI18n()->format($this->underWidth, [
                 'attribute' => $label,
                 'limit' => $this->minWidth
             ], Yii::$app->language);
         }
-        
-        if ( $this->maxWidth !== null ) {
+
+        if ($this->maxWidth !== null) {
             $options['maxWidth'] = $this->maxWidth;
             $options['overWidth'] = Yii::$app->getI18n()->format($this->overWidth, [
                 'attribute' => $label,
                 'limit' => $this->maxWidth
             ], Yii::$app->language);
         }
-        
-        if ( $this->minHeight !== null ) {
+
+        if ($this->minHeight !== null) {
             $options['minHeight'] = $this->minHeight;
             $options['underHeight'] = Yii::$app->getI18n()->format($this->underHeight, [
                 'attribute' => $label,
                 'limit' => $this->maxHeight
             ], Yii::$app->language);
         }
-        
-        if ( $this->maxHeight !== null ) {
+
+        if ($this->maxHeight !== null) {
             $options['maxHeight'] = $this->maxHeight;
             $options['overHeight'] = Yii::$app->getI18n()->format($this->overHeight, [
                 'attribute' => $label,
                 'limit' => $this->maxHeight
             ], Yii::$app->language);
         }
-        
-        return 'yii.validation.image(messages, ' . json_encode($options) . ', deferred, attribute);';
+
+        return $options;
     }
 }