Add filesizeValidator (#26)

* Add filesizeValidator

* Bump version

demo/index.php

@@ -16,6 +16,7 @@
 use Packaged\SafeHtml\SafeHtml;
 use Packaged\Validate\Validators\ConfirmationValidator;
 use Packaged\Validate\Validators\EqualValidator;
+use Packaged\Validate\Validators\FileSizeValidator;
 use Packaged\Validate\Validators\RegexValidator;
 use Packaged\Validate\Validators\RequiredValidator;
 use Packaged\Validate\Validators\StringValidator;
@@ -94,7 +95,10 @@ protected function _initDataHandlers()
       ->addValidator(new RequiredValidator());
     $this->youCantTouchThis = ReadOnlyDataHandler::i()->setValue('Dare You');
     $this->age = IntegerDataHandler::i()->setLabel('How old are you?');
-    $this->profilePicture = FileDataHandler::i()->setLabel("Profile Picture")->setGuidance('120px X 120px png or jpg');
+    $this->profilePicture = FileDataHandler::i()
+      ->addValidator(new FileSizeValidator(1))
+      ->setLabel("Profile Picture")
+      ->setGuidance('Max Size 1mb');
     $this->comments = MultiLineTextDataHandler::i()
       ->setLabel("Any Comments?")
       ->setGuidance("Required")
@@ -113,8 +117,7 @@ protected function _configureDataHandlers()
 $form = new DemoForm();
 if(!empty($data))
 {
-  $form->hydrate($data);
-  $form->validate();
+  $errors = $form->hydrate($data);
 }
 
 ?>
@@ -151,6 +154,24 @@ protected function _configureDataHandlers()
 <h2>Example Form</h2>
 <?php echo $form->render() ?>
 
+<?php if(!empty($errors)): ?>
+  <div>
+    <h2>ERROR Data</h2>
+    <table>
+      <?php foreach($errors as $k => $v): ?>
+        <tr>
+          <th><?= $k; ?></th>
+          <td>
+            <?php foreach($v as $o): ?>
+              <?= $o->getMessage() ?>
+            <?php endforeach; ?>
+          </td>
+        </tr>
+      <?php endforeach; ?>
+    </table>
+  </div>
+<?php endif; ?>
+
 <?php if(!empty($data)): ?>
   <div style="display: flex">
     <div><h2>POST Data</h2>
@@ -164,6 +185,7 @@ protected function _configureDataHandlers()
       </table>
     </div>
     <div><h2>Form Data</h2>
+      <?= $form->selection->getValue() ?>
       <table>
         <?php foreach($form->getFormData() as $k => $v): ?>
           <tr>

js/src/validation.js

@@ -11,10 +11,16 @@ const _errorMap = new WeakMap();
 
 function _getEleValue(ele)
 {
-  if((!(ele.type === 'checkbox' || ele.type === 'radio')) || ele instanceof HTMLSelectElement || ele.checked)
+  if((!(ele.type === 'checkbox' || ele.type === 'radio' || ele.type === 'file')) || ele instanceof HTMLSelectElement || ele.checked)
   {
     return ele.value;
   }
+
+  if(ele.type === 'file' && ele.files[0])
+  {
+    return ele.files[0];
+  }
+
   return null;
 }
 
@@ -48,7 +54,7 @@ function _getHandlerValue(form, handlerName)
         return;
       }
       if(ele.getAttribute('name')
-            .substr(-1) === ']')
+        .substr(-1) === ']')
       {
         if(!fieldValue || fieldValue.constructor.name !== 'Array')
         {
@@ -221,7 +227,8 @@ export function validateHandler(form, handlerName, errorOnPotentiallyValid = fal
     addErrors(form, handlerName, result, errorOnPotentiallyValid);
   }
 
-  form.dispatchEvent(new CustomEvent('form-handler-validation',
+  form.dispatchEvent(new CustomEvent(
+    'form-handler-validation',
     {detail: {handlerName, result}, bubbles: true, cancellable: false}
   ));
 
@@ -250,7 +257,8 @@ export function validateForm(form)
     fullResult.append(handlerName, result);
   });
 
-  form.dispatchEvent(new CustomEvent('form-validation',
+  form.dispatchEvent(new CustomEvent(
+    'form-validation',
     {detail: {result: fullResult}, bubbles: true, cancellable: false}
   ));
   return fullResult;

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@packaged/form",
-  "version": "4.2.3",
+  "version": "4.3.0",
   "main": "/index.js",
   "repository": "[email protected]:packaged/form",
   "author": "Tom Kay <[email protected]>",