Parsley.js validation of file size?

Question

I am trying to validate the file size of an upload using Parsley.js if possible. I am open to other methods as well. (I have tried using other methods with no success). This method would be the one I would like most if I could choose -- if that makes any sense. (Mostly because I use parsley for all of my other validation).

The error I receive as posted is: Uncaught TypeError: Cannot call method 'parsley' of null. I have also tried modifying other pieces of the code with no success.

Here is the parsley documentation.

Yes, this is for a PHP project in class (this part isn't required). However, when a file is uploaded that is too large -- I use php once submitted to check file size -- it breaks my sql uploads. So I am trying to validate client-side before uploading. I have had zero success. I need the form to not submit if the file size is too large. Also, I do realize that the method I am attempting may not work in all browsers.

I have these scripts included:

<script language="javascript" src="js/jquery-1.10.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script language="javascript" src="js/parsley.js"></script>

Here is my custom parsley code (found here):

<script language="javascript">
$('myFile').parsley({
  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 1.5 megabytes."
  }
});
</script>

And here is my form code (there are many other form fields that I removed):

<form action="register.php" enctype="multipart/form-data" method="post" autocomplete="on" class="form-horizontal" parsley-validate id="register">
                <div class="fields">


                <div class="field upl">
                <label for="file">Face picture:</label>
                <input data-filemaxsize="1.5" type="file" name="file" id="myFile" accept="image/jpeg" required/>
                </div>

                <input type="submit" value="Register" class="login" id="register" onsubmit="return validation(this)"  />
                </div>
                </form>

Also:: (!Modernizr.fileapi) --> What does this piece of code do/refer to?

Answer 1

The problem was the protoplasm datepicker that I was using. I fixed the problems I was having by switching to a jQuery validation plugin. The validator works great now! I do however run all of the same validation server-side with php. I really appreciate the input, in the end switching libraries solved everything!

Answer 2

I have a feeling that the the validator you have written doesn't follow the same structure as needed. I have used Parsley.js before but I have never written a new validator. If you take a look at https://github.com/guillaumepotier/Parsley.js/blob/master/parsley.extend.js you will see that each validator returns a validate function.

Try adding the same to your validator.