File fields no longer upload unless they pass validation rules

dist/formulate.esm.js

@@ -159,6 +159,9 @@ FileUpload.prototype.hasUploader = function hasUploader () {
   return !!this.context.uploader
 };
 
+/**
+ * Check if the given uploader is axios instance.
+ */
 FileUpload.prototype.uploaderIsAxios = function uploaderIsAxios () {
   if (
     this.hasUploader &&
@@ -207,7 +210,7 @@ FileUpload.prototype.upload = function upload () {
       return reject(new Error('No uploader has been defined'))
     }
     Promise.all(this$1.files.map(function (file) {
-      return this$1.getUploader(
+      return file.path ? Promise.resolve(file.path) : this$1.getUploader(
         file.file,
         function (progress) {
           file.progress = progress;
@@ -940,7 +943,8 @@ var context = {
       uploadUrl: this.uploadUrl,
       uploader: this.uploader || this.$formulate.getUploader(),
       uploadBehavior: this.uploadBehavior,
-      preventWindowDrops: this.preventWindowDrops},
+      preventWindowDrops: this.preventWindowDrops,
+      hasValidationErrors: this.hasValidationErrors},
       this.typeContext))
   },
   nameOrFallback: nameOrFallback,
@@ -1242,8 +1246,8 @@ var script = {
       default: false
     },
     uploadBehavior: {
-      type: Boolean,
+      type: String,
-      default: true
+      default: 'live'
     },
     preventWindowDrops: {
       type: Boolean,
@@ -1256,7 +1260,8 @@ var script = {
       localAttributes: {},
       internalModelProxy: this.formulateValue,
       behavioralErrorVisibility: (this.errorBehavior === 'live'),
-      validationErrors: []
+      validationErrors: [],
+      pendingValidation: Promise.resolve()
     }
   },
   computed: Object.assign({}, context,
@@ -1303,7 +1308,7 @@ var script = {
       var this$1 = this;
 
       var rules = parseRules(this.validation, this.$formulate.rules());
-      Promise.all(
+      this.pendingValidation = Promise.all(
         rules.map(function (ref) {
           var rule = ref[0];
           var args = ref[1];
@@ -1319,7 +1324,20 @@ var script = {
         })
       )
         .then(function (result) { return result.filter(function (result) { return result; }); })
-        .then(function (errorMessages) { this$1.validationErrors = errorMessages; });
+        .then(function (errorMessages) {
+          console.log('setting validation errors');
+          this$1.validationErrors = errorMessages;
+        });
+      return this.pendingValidation
+    },
+    hasValidationErrors: function hasValidationErrors () {
+      var this$1 = this;
+
+      return new Promise(function (resolve) {
+        this$1.$nextTick(function () {
+          this$1.pendingValidation.then(function () { return resolve(!!this$1.validationErrors.length); });
+        });
+      })
     }
   }
 };
@@ -2386,12 +2404,24 @@ var script$7 = {
       }
     },
     handleFile: function handleFile () {
+      this.isOver = false;
       var input = this.$refs.file;
       if (input.files.length) {
         this.context.model = this.$formulate.createUpload(input, this.context);
       }
-      if (this.context.uploadBehavior === 'live' && this.context.model instanceof FileUpload) {
+      this.attemptImmediateUpload();
-        this.context.model.upload();
+    },
+    attemptImmediateUpload: function attemptImmediateUpload () {
+      var this$1 = this;
+
+      if (this.context.uploadBehavior === 'live' &&
+        this.context.model instanceof FileUpload) {
+        this.context.hasValidationErrors().then(function (errors) {
+          console.log('validation errors', errors);
+          if (!errors) {
+            this$1.context.model.upload();
+          }
+        });
       }
     },
     handleDragOver: function handleDragOver (e) {

dist/formulate.min.js

@@ -162,6 +162,9 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
     return !!this.context.uploader
   };
 
+  /**
+   * Check if the given uploader is axios instance.
+   */
   FileUpload.prototype.uploaderIsAxios = function uploaderIsAxios () {
     if (
       this.hasUploader &&
@@ -210,7 +213,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         return reject(new Error('No uploader has been defined'))
       }
       Promise.all(this$1.files.map(function (file) {
-        return this$1.getUploader(
+        return file.path ? Promise.resolve(file.path) : this$1.getUploader(
           file.file,
           function (progress) {
             file.progress = progress;
@@ -943,7 +946,8 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         uploadUrl: this.uploadUrl,
         uploader: this.uploader || this.$formulate.getUploader(),
         uploadBehavior: this.uploadBehavior,
-        preventWindowDrops: this.preventWindowDrops},
+        preventWindowDrops: this.preventWindowDrops,
+        hasValidationErrors: this.hasValidationErrors},
         this.typeContext))
     },
     nameOrFallback: nameOrFallback,
@@ -1245,8 +1249,8 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         default: false
       },
       uploadBehavior: {
-        type: Boolean,
+        type: String,
-        default: true
+        default: 'live'
       },
       preventWindowDrops: {
         type: Boolean,
@@ -1259,7 +1263,8 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         localAttributes: {},
         internalModelProxy: this.formulateValue,
         behavioralErrorVisibility: (this.errorBehavior === 'live'),
-        validationErrors: []
+        validationErrors: [],
+        pendingValidation: Promise.resolve()
       }
     },
     computed: Object.assign({}, context,
@@ -1306,7 +1311,7 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         var this$1 = this;
 
         var rules = parseRules(this.validation, this.$formulate.rules());
-        Promise.all(
+        this.pendingValidation = Promise.all(
           rules.map(function (ref) {
             var rule = ref[0];
             var args = ref[1];
@@ -1322,7 +1327,20 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
           })
         )
           .then(function (result) { return result.filter(function (result) { return result; }); })
-          .then(function (errorMessages) { this$1.validationErrors = errorMessages; });
+          .then(function (errorMessages) {
+            console.log('setting validation errors');
+            this$1.validationErrors = errorMessages;
+          });
+        return this.pendingValidation
+      },
+      hasValidationErrors: function hasValidationErrors () {
+        var this$1 = this;
+
+        return new Promise(function (resolve) {
+          this$1.$nextTick(function () {
+            this$1.pendingValidation.then(function () { return resolve(!!this$1.validationErrors.length); });
+          });
+        })
       }
     }
   };
@@ -2389,12 +2407,24 @@ var Formulate = (function (exports, isUrl, nanoid, isPlainObject) {
         }
       },
       handleFile: function handleFile () {
+        this.isOver = false;
         var input = this.$refs.file;
         if (input.files.length) {
           this.context.model = this.$formulate.createUpload(input, this.context);
         }
-        if (this.context.uploadBehavior === 'live' && this.context.model instanceof FileUpload) {
+        this.attemptImmediateUpload();
-          this.context.model.upload();
+      },
+      attemptImmediateUpload: function attemptImmediateUpload () {
+        var this$1 = this;
+
+        if (this.context.uploadBehavior === 'live' &&
+          this.context.model instanceof FileUpload) {
+          this.context.hasValidationErrors().then(function (errors) {
+            console.log('validation errors', errors);
+            if (!errors) {
+              this$1.context.model.upload();
+            }
+          });
         }
       },
       handleDragOver: function handleDragOver (e) {

dist/formulate.umd.js

@@ -165,6 +165,9 @@
     return !!this.context.uploader
   };
 
+  /**
+   * Check if the given uploader is axios instance.
+   */
   FileUpload.prototype.uploaderIsAxios = function uploaderIsAxios () {
     if (
       this.hasUploader &&
@@ -213,7 +216,7 @@
         return reject(new Error('No uploader has been defined'))
       }
       Promise.all(this$1.files.map(function (file) {
-        return this$1.getUploader(
+        return file.path ? Promise.resolve(file.path) : this$1.getUploader(
           file.file,
           function (progress) {
             file.progress = progress;
@@ -946,7 +949,8 @@
         uploadUrl: this.uploadUrl,
         uploader: this.uploader || this.$formulate.getUploader(),
         uploadBehavior: this.uploadBehavior,
-        preventWindowDrops: this.preventWindowDrops},
+        preventWindowDrops: this.preventWindowDrops,
+        hasValidationErrors: this.hasValidationErrors},
         this.typeContext))
     },
     nameOrFallback: nameOrFallback,
@@ -1248,8 +1252,8 @@
         default: false
       },
       uploadBehavior: {
-        type: Boolean,
+        type: String,
-        default: true
+        default: 'live'
       },
       preventWindowDrops: {
         type: Boolean,
@@ -1262,7 +1266,8 @@
         localAttributes: {},
         internalModelProxy: this.formulateValue,
         behavioralErrorVisibility: (this.errorBehavior === 'live'),
-        validationErrors: []
+        validationErrors: [],
+        pendingValidation: Promise.resolve()
       }
     },
     computed: Object.assign({}, context,
@@ -1309,7 +1314,7 @@
         var this$1 = this;
 
         var rules = parseRules(this.validation, this.$formulate.rules());
-        Promise.all(
+        this.pendingValidation = Promise.all(
           rules.map(function (ref) {
             var rule = ref[0];
             var args = ref[1];
@@ -1325,7 +1330,20 @@
           })
         )
           .then(function (result) { return result.filter(function (result) { return result; }); })
-          .then(function (errorMessages) { this$1.validationErrors = errorMessages; });
+          .then(function (errorMessages) {
+            console.log('setting validation errors');
+            this$1.validationErrors = errorMessages;
+          });
+        return this.pendingValidation
+      },
+      hasValidationErrors: function hasValidationErrors () {
+        var this$1 = this;
+
+        return new Promise(function (resolve) {
+          this$1.$nextTick(function () {
+            this$1.pendingValidation.then(function () { return resolve(!!this$1.validationErrors.length); });
+          });
+        })
       }
     }
   };
@@ -2392,12 +2410,24 @@
         }
       },
       handleFile: function handleFile () {
+        this.isOver = false;
         var input = this.$refs.file;
         if (input.files.length) {
           this.context.model = this.$formulate.createUpload(input, this.context);
         }
-        if (this.context.uploadBehavior === 'live' && this.context.model instanceof FileUpload) {
+        this.attemptImmediateUpload();
-          this.context.model.upload();
+      },
+      attemptImmediateUpload: function attemptImmediateUpload () {
+        var this$1 = this;
+
+        if (this.context.uploadBehavior === 'live' &&
+          this.context.model instanceof FileUpload) {
+          this.context.hasValidationErrors().then(function (errors) {
+            console.log('validation errors', errors);
+            if (!errors) {
+              this$1.context.model.upload();
+            }
+          });
         }
       },
       handleDragOver: function handleDragOver (e) {

src/FileUpload.js

@@ -50,6 +50,9 @@ class FileUpload {
     return !!this.context.uploader
   }
 
+  /**
+   * Check if the given uploader is axios instance.
+   */
   uploaderIsAxios () {
     if (
       this.hasUploader &&
@@ -92,7 +95,7 @@ class FileUpload {
         return reject(new Error('No uploader has been defined'))
       }
       Promise.all(this.files.map(file => {
-        return this.getUploader(
+        return file.path ? Promise.resolve(file.path) : this.getUploader(
           file.file,
           (progress) => {
             file.progress = progress

src/FormulateInput.vue

@@ -150,8 +150,8 @@ export default {
       default: false
     },
     uploadBehavior: {
-      type: Boolean,
+      type: String,
-      default: true
+      default: 'live'
     },
     preventWindowDrops: {
       type: Boolean,
@@ -164,7 +164,8 @@ export default {
       localAttributes: {},
       internalModelProxy: this.formulateValue,
       behavioralErrorVisibility: (this.errorBehavior === 'live'),
-      validationErrors: []
+      validationErrors: [],
+      pendingValidation: Promise.resolve()
     }
   },
   computed: {
@@ -211,7 +212,7 @@ export default {
     },
     performValidation () {
       const rules = parseRules(this.validation, this.$formulate.rules())
-      Promise.all(
+      this.pendingValidation = Promise.all(
         rules.map(([rule, args]) => {
           return rule(this.context.model, ...args)
             .then(res => res ? false : this.$formulate.validationMessage(rule.name, {
@@ -224,7 +225,18 @@ export default {
         })
       )
         .then(result => result.filter(result => result))
-        .then(errorMessages => { this.validationErrors = errorMessages })
+        .then(errorMessages => {
+          console.log('setting validation errors')
+          this.validationErrors = errorMessages
+        })
+      return this.pendingValidation
+    },
+    hasValidationErrors () {
+      return new Promise(resolve => {
+        this.$nextTick(() => {
+          this.pendingValidation.then(() => resolve(!!this.validationErrors.length))
+        })
+      })
     }
   }
 }

src/inputs/FormulateInputFile.vue

@@ -73,12 +73,22 @@ export default {
       }
     },
     handleFile () {
+      this.isOver = false
       const input = this.$refs.file
       if (input.files.length) {
         this.context.model = this.$formulate.createUpload(input, this.context)
       }
-      if (this.context.uploadBehavior === 'live' && this.context.model instanceof FileUpload) {
+      this.attemptImmediateUpload()
-        this.context.model.upload()
+    },
+    attemptImmediateUpload () {
+      if (this.context.uploadBehavior === 'live' &&
+        this.context.model instanceof FileUpload) {
+        this.context.hasValidationErrors().then(errors => {
+          console.log('validation errors', errors)
+          if (!errors) {
+            this.context.model.upload()
+          }
+        })
       }
     },
     handleDragOver (e) {

src/libs/context.js

@@ -24,6 +24,7 @@ export default {
       uploader: this.uploader || this.$formulate.getUploader(),
       uploadBehavior: this.uploadBehavior,
       preventWindowDrops: this.preventWindowDrops,
+      hasValidationErrors: this.hasValidationErrors,
       ...this.typeContext
     })
   },