Validate max file upload size with parsley.js

Question

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 d

Answer 1

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

Answer 2

There are a few remarks:

1. That code appears to be from Parsley 1.* (see documentation), which is now deprecated.
2. Even though it appears to be from Parsley 1.*, that code does not follow the correct structure for a custom validator (see an example).
3. Parsley excludes input[type=file] by default. Just for this, your code is never executed.
4. 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>

Answer 3

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....