Reputation: 148
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?
Upvotes: 3
Views: 3958
Reputation: 148
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!
Upvotes: 1
Reputation: 9758
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.
Upvotes: 1