Validate max file upload size with parsley.js

问题

I'm using parsley.js in a USP Pro form in Wordpress. The validation works, in general, but now I'm trying to validate the max file size and I don't really understand how to do it.

I've found these instructions, but couldn't manage to make it work.

Here's my code:

<input type="file" data-parsley-error-message="This field is required" required="required" placeholder="File(s)" name="usp-files[]" multiple="multiple" data-filemaxsize="1.5" maxlength="255" class="file-input usp-input usp-input-files usp-clone" id="usp-multiple-files" data-parsley-id="3077">


window.ParsleyConfig = {
    validators: {
        filemaxsize: function (val, max_megabytes, parsleyField) {
            if (!Modernizr.fileapi) { return true; }

            var $file_input = $(parsleyField.element);
            if ($file_input.is(':not(input[type="file"])')) {
                console.log("Validation on max file size only works on file input types");
                return true;
            }

            var max_bytes = max_megabytes * BYTES_PER_MEGABYTE, files = $file_input.get(0).files;

            if (files.length == 0) {
                // No file, so valid. (Required check should ensure file is selected)
                return true;
            }

            return files.length == 1 && files[0].size <= max_bytes;
        }
    },
    messages: {
        filemaxsize: "The file cannot be more than %s megabytes."
    }
};

window.Modernizr.addTest('fileapi', function() { return window.File && window.FileReader; });
window.BYTES_PER_MEGABYTE = 1048576;

jQuery(function($){
    $('.usp-form').parsley();
});

I tried uploading a picture of 19 megabytes and nothing happened. No errors or anything, nothing in the console.

What am I missing?

回答1:

There are a few remarks:

That code appears to be from Parsley 1.* (see documentation), which is now deprecated.
Even though it appears to be from Parsley 1.*, that code does not follow the correct structure for a custom validator (see an example).
Parsley excludes input[type=file] by default. Just for this, your code is never executed.
The custom validator should be bind by parsley-filemaxsize instead of data-filemaxsize

I've managed to tweeak the code, and the solution is below. You can also check the working jsfiddle.

Please be aware: I've spent some time trying to convert this code into Parsley 2.* . However, I don't think you can use Parsley 2.* since the Custom Validators only recieve the value and the requirement and you need the parsleyField.$element to verify the file size.

<form id="form">
    <input type="file" data-parsley-error-message="This field is required" required="required"
       placeholder="File(s)" name="usp-files[]" multiple="multiple" parsley-filemaxsize="1.5"
       maxlength="255" class="file-input usp-input usp-input-files usp-clone" id="usp-multiple-files" />
    <button type="submit">Submit</button>
</form>

<script>
$(document).ready(function() {
    $('#form').parsley({
        validators: {
            filemaxsize: function() {
                return {
                    validate: function (val, max_megabytes, parsleyField) {
                        if (!Modernizr.fileapi) { return true; }

                        var $file_input = $(parsleyField.element);
                        if ($file_input.is(':not(input[type="file"])')) {
                            console.log("Validation on max file size only works on file input types");
                            return true;
                        }

                        var max_bytes = max_megabytes * BYTES_PER_MEGABYTE, files = $file_input.get(0).files;

                        if (files.length == 0) {
                            // No file, so valid. (Required check should ensure file is selected)
                            return true;
                        }

                        return files.length == 1  && files[0].size <= max_bytes;
                    },
                    priority: 1
                };
            }
        },
        messages: {
            filemaxsize: "The file cannot be more than %s megabytes."
        }
        , excluded: 'input[type=hidden], :disabled'
    });

    /**
     * Extension to Modernizer for File API support
     */
    window.Modernizr.addTest('fileapi', function() { return window.File && window.FileReader; });

    window.BYTES_PER_MEGABYTE = 1048576;

    $('#form').on("submit", function(e) {
        e.preventDefault();
        $(this).parsley("validate");
    });
});
</script>

回答2:

I was now struggeling about the same Problem for days and I now have found one possible workaround. The problem is (as mentioned above) that you dont get the parsleyField anymore but have only the requirement and value field. My idea is to use the requirement field and put there the name or ID of the input field together with the required filesize.

This could look like:

<input type="file" name="Upload" required="required" parsley-filemaxsize="Upload|1.5"/>

Then you should be able to write your own validator like so:

window.ParsleyValidator
  .addValidator('filemaxsize', function (val, req) {
      var reqs = req.split('|');
      var input = $('input[type="file"][name="'+reqs[0]+'"]');
      var maxsize = reqs[1];
      var max_bytes = maxsize * 1000000, file = input.files[0];

      return file.size <= max_bytes;

  }, 32)
  .addMessage('en', 'filemaxsize', 'The File size is too big.')
  .addMessage('de', 'filemaxsize', 'Die Datei ist zu groß.');

I didn't find a solution to use the placeholder %s in the messages yet since it now contains unclean data....

回答3:

In fact, this is not working. You have to add file = input[0].files[0];

来源：https://stackoverflow.com/questions/26021904/validate-max-file-upload-size-with-parsley-js

标签

javascript

validation

parsley.js