2

I'm going to upload one image. I need to put below validations on Client side & Server Side

  • Allowed file formats: jpeg, jpg, png
  • Max. File Size is 5MB.
  • Image size should be 100 Width x 100 height

lib\web\mage\validation.js

From above file, not able to achieve this.

app\code\Custom\Module\Block\MyPost\Edit.php

<input type="file" name="image" id="image" value=""  data-validate="{required:true}" />
7

We should create new validation classes: validate-filesize, validate-fileextensions & validate-image-height-width.

require([
        'jquery',
        'jquery/ui',
        'jquery/validate',
        'mage/translate'
    ], function ($) {
    //Validate Image FileSize        

    $.validator.addMethod(
            'validate-filesize', function (v, elm) {
                var maxSize = 5 * 102400;
                if (navigator.appName == "Microsoft Internet Explorer") {
                    if (elm.value) {
                        var oas = new ActiveXObject("Scripting.FileSystemObject");
                        var e = oas.getFile(elm.value);
                        var size = e.size;
                    }
                } else {
                    if (elm.files[0] != undefined) {
                        size = elm.files[0].size;
                    }
                }
                if (size != undefined && size > maxSize) {
                    return false;
                }
                return true;
            }, $.mage.__('The file size should not exceed 5MB'));

    //Validate Image Extensions

    $.validator.addMethod(
            'validate-fileextensions', function (v, elm) {

                var extensions = ['jpeg', 'jpg', 'png', 'gif'];
                if (!v) {
                    return true;
                }
                with (elm) {
                    var ext = value.substring(value.lastIndexOf('.') + 1);
                    for (i = 0; i < extensions.length; i++) {
                        if (ext == extensions[i]) {
                            return true;
                        }
                    }
                }
                return false;
            }, $.mage.__('Disallowed file type.'));

    //Validate Image Width and Height

    $.validator.addMethod(
            'validate-image-height-width', function (v, elm) {

                if (!v) {
                    return true;
                }
                with (elm) {
                    var file, img;
                    if ((file = elm.files[0])) {
                        img = new Image();
                        img.onload = function () {
                            var height = this.height,
                                    width = this.width;
                            if (height > 100 || width > 100) {
                                return false;
                            }

                            return true;
                        };
                    }
                }
                return false;
            }, $.mage.__('Height and Width must not exceed 100px.'));
});

I followed a guide to create the script above: https://gist.github.com/obukhow/5040981

| improve this answer | |
  • Thanks @Khoa. For Image Height & Width Validation? – Jackson Sep 2 '16 at 7:16
  • I updated the new case, however, not yet test. If there is any error, let's me know. – Khoa TruongDinh Sep 2 '16 at 7:46
  • 1
    @khoa where I have to add this above code. Please specify the location as well. – sudo55 Dec 19 '18 at 22:17

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.