Merge pull request vue-generators#314 from hansi90/file_upload_error

File upload error fixed.

Author: icebob

.eslintrc.js

@@ -21,7 +21,8 @@ module.exports = {
     "rules": {
         "indent": [
             "warn",
-            "tab"
+            "tab",
+            { SwitchCase: 1 }
         ],
         "quotes": [
             "warn",

examples/post-form/main.js

@@ -7,7 +7,7 @@ var vm = new Vue({
 	},
 
 	methods: {
-		prettyJSON: function(json) {
+		prettyJSON: function (json) {
 			if (json) {
 				json = JSON.stringify(json, undefined, 4);
 				json = json.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
@@ -74,7 +74,7 @@ var vm = new Vue({
 					required: true,
 					hint: "Minimum 6 characters",
 					validator: VueFormGenerator.validators.string
-				},	
+				},
 				{
 					type: "input",
 					inputType: "email",
@@ -83,7 +83,7 @@ var vm = new Vue({
 					inputName: "email",
 					placeholder: "User's e-mail address",
 					validator: VueFormGenerator.validators.email
-				},					
+				},
 				{
 					type: "select",
 					label: "Skills",
@@ -100,6 +100,14 @@ var vm = new Vue({
 						"VueJS"
 					],
 					validator: VueFormGenerator.validators.string
+				}, {
+					type: "upload",
+					label: "Photo",
+					model: "photo",
+					inputName: "photo",
+					onChanged(model, schema, event) {
+						console.log(model, schema, event);
+					}
 				},
 				{
 					type: "checkbox",

src/fields/core/fieldInput.vue

@@ -5,7 +5,7 @@
 		:type="schema.inputType",
 		:value="value",
 		@input="value = $event.target.value",
-		@change="onChange",
+		@change="schema.onChange || null",
 		:disabled="disabled",
 		:accept="schema.accept",
 		:alt="schema.alt",
@@ -37,22 +37,17 @@
 </template>
 
 <script>
-	import abstractField from "../abstractField";
-	import fecha from "fecha";
+import abstractField from "../abstractField";
+import fecha from "fecha";
 
-	export default {
-		mixins: [ abstractField ],
-		methods: {
-			onChange(event){
-				if (this.schema.inputType === "file") {
-					this.value = event.target.files;
-				}
-			},
-			
-			formatValueToField(value) {
-				if (value != null) {
-					let dt;
-					switch(this.schema.inputType){
+export default {
+	mixins: [abstractField],
+	methods: {
+
+		formatValueToField(value) {
+			if (value != null) {
+				let dt;
+				switch (this.schema.inputType) {
 					case "date":
 						dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
 						return fecha.format(dt, "YYYY-MM-DD");
@@ -62,16 +57,16 @@
 					case "datetime-local":
 						dt = this.schema.format ? fecha.parse(value, this.schema.format) : new Date(value);
 						return fecha.format(dt, "YYYY-MM-DDTHH:mm:ss");
-					}
 				}
-				
-				return value;
-			},
+			}
 
-			formatValueToModel(value) {
-				if (value != null) {
-					let m;
-					switch (this.schema.inputType){
+			return value;
+		},
+
+		formatValueToModel(value) {
+			if (value != null) {
+				let m;
+				switch (this.schema.inputType) {
 					case "date":
 						m = fecha.parse(value, "YYYY-MM-DD");
 						if (m !== false) {
@@ -100,16 +95,20 @@
 						}
 						break;
 					case "number":
-						return Number(value);					
+						return Number(value);
 					case "range":
 						return Number(value);
-					}
 				}
-
-				return value;
 			}
+
+			return value;
 		}
-	};
+	},
+
+	created () {
+		console.warn("The 'file' type in input field is deprecated. Use 'file' field instead.");	
+	}
+};
 
 </script>
 

src/fields/core/fieldUpload.vue

@@ -0,0 +1,43 @@
+<template lang="pug">
+.wrapper
+	input.form-control(
+		id="getFieldID(schema)",
+		type="file",
+		:name="schema.inputName",
+		@change="onChange",
+		:accept="schema.accept",
+		:multiple="schema.multiple",
+		:placeholder="schema.placeholder",
+		:readonly="schema.readonly",
+		:required="schema.required",
+		:disabled="disabled",)
+</template>
+
+<script>
+import abstractField from "../abstractField";
+import { isFunction } from "lodash";
+
+export default {
+	mixins: [abstractField],
+	methods: {
+		onChange(){
+			if(isFunction(this.schema.onChanged)){
+				// Schema has defined onChange method.
+				this.schema.onChanged.call(this, this.model, this.schema, event, this);
+			}
+		}
+	}
+};
+
+</script>
+
+<style lang="sass">
+	.vue-form-generator .field-input {
+		.wrapper {
+			width: 100%;
+		}
+		.helper {
+			margin: auto 0.5em;
+		}
+	}
+</style>

src/formGenerator.vue

@@ -211,12 +211,12 @@ div.vue-form-generator(v-if='schema != null')
 				}
 
 				switch (relevantType) {
-				case "button":
-				case "submit":
-				case "reset":
-					return false;
-				default:
-					return true;
+					case "button":
+					case "submit":
+					case "reset":
+						return false;
+					default:
+						return true;
 				}
 			},
 

test/unit/specs/fields/fieldUpload.spec.js

@@ -0,0 +1,74 @@
+import { expect } from "chai";
+import { createVueField, checkAttribute } from "../util";
+
+import Vue from "vue";
+import fieldUpload from "src/fields/core/fieldUpload.vue";
+
+Vue.component("fieldUpload", fieldUpload);
+
+let el, vm, field;
+
+function createField(test, schema = {}, model = null, disabled = false, options) {
+	[el, vm, field] = createVueField(test, "fieldUpload", schema, model, disabled, options);
+}
+
+describe("fieldUpload.vue", function () {
+
+	describe("check template", () => {
+		let schema = {
+			type: "upload",
+			label: "Upload",
+			inputName: "testupload",
+			placeholder: "Field placeholder",
+			readonly: false,
+			required: false,
+			disabled: false,
+			multiple: true,
+			accept: "image/*"
+		};
+		let model = {};
+		let attributes = ["disabled", "placeholder", "readonly"];
+		let input;
+
+		before(() => {
+			createField(this, schema, model, false);
+			input = el.getElementsByTagName("input")[0];
+			field.schema.inputType = "file";
+		});
+
+		it("should contain an input text element", () => {
+			expect(field).to.be.exist;
+			expect(field.$el).to.be.exist;
+
+			expect(input).to.be.defined;
+			expect(input.type).to.be.equal("file");
+			expect(input.classList.contains("form-control")).to.be.true;
+		});
+
+		describe("check optional attribute", () => {
+			attributes.forEach(function (name) {
+				it("should set " + name, function (done) {
+					checkAttribute(name, vm, input, field, schema, done);
+				});
+			});
+
+			it("should set name", () => {
+				expect(input.name).to.be.equal("testupload");
+			});
+
+			it("should set required", () => {
+				expect(input.required).to.be.false;
+			});
+
+			it("should set multiple", () => {
+				expect(input.multiple).to.be.exist;
+			});
+
+			it("should set accept", () => {
+				expect(input.accept).to.be.equal("image/*");
+			});
+
+		});
+
+	});
+});