1+ <template >
2+ <input
3+ ref =" input"
4+ type =" file"
5+ v-bind:accept =" question.accept"
6+ v-bind:multiple =" question.multiple"
7+ v-bind:value =" modelValue"
8+ v-bind:required =" question.required"
9+ v-on:keyup.enter.prevent =" onEnter"
10+ v-on:keyup.tab.prevent =" onEnter"
11+ v-on:focus =" setFocus"
12+ v-on:blur =" unsetFocus"
13+ v-on:change =" onChange"
14+ />
15+ </template >
16+
17+ <script >
18+ /*
19+ Copyright (c) 2020 - present, DITDOT Ltd. - MIT Licence
20+ https://github.com/ditdot-dev/vue-flow-form
21+ https://www.ditdot.hr/en
22+ */
23+
24+ import TextType from ' ./TextType.vue'
25+ import { QuestionType } from ' ../../models/QuestionModel'
26+
27+ export default {
28+ extends: TextType,
29+
30+ name: QuestionType .File ,
31+
32+ mounted () {
33+ if (this .question .accept ) {
34+ this .mimeTypeRegex = new RegExp (this .question .accept .replace (' *' ' [^\\ /,]+'
35+ }
36+ },
37+
38+ methods: {
39+ setAnswer (answer ) {
40+ this .question .setAnswer (this .files )
41+
42+ this .answer = answer
43+ this .question .answered = this .isValid ()
44+
45+ this .$emit (' update:modelValue'
46+ },
47+
48+ showInvalid () {
49+ return this .errorMessage !== null
50+ },
51+
52+ validate () {
53+ this .errorMessage = null
54+
55+ if (this .question .required && ! this .hasValue ) {
56+ return false
57+ }
58+
59+ if (this .question .accept ) {
60+ if (! Array .from (this .files ).every (file => this .mimeTypeRegex .test (file .type ))) {
61+ this .errorMessage = this .language .formatString (this .language .errorAllowedFileTypes , {
62+ fileTypes: this .question .accept
63+ })
64+
65+ return false
66+ }
67+ }
68+
69+ if (this .question .multiple ) {
70+ const fileCount = this .files .length
71+
72+ if (this .question .min !== null && fileCount < + this .question .min ) {
73+ this .errorMessage = this .language .formatString (this .language .errorMinFiles , {
74+ min: this .question .min
75+ })
76+
77+ return false
78+ }
79+
80+ if (this .question .max !== null && fileCount > + this .question .max ) {
81+ this .errorMessage = this .language .formatString (this .language .errorMaxFiles , {
82+ max: this .question .max
83+ })
84+
85+ return false
86+ }
87+ }
88+
89+ if (this .question .maxSize !== null ) {
90+ const fileSize =
91+ Array .from (this .files ).reduce ((current , file ) => current + file .size , 0 )
92+
93+ if (fileSize > + this .question .maxSize ) {
94+ this .errorMessage = this .language .formatString (this .language .errorMaxFileSize , {
95+ size: this .language .formatFileSize (this .question .maxSize )
96+ })
97+
98+ return false
99+ }
100+ }
101+
102+ return this .$refs .input .checkValidity ()
103+ }
104+ },
105+
106+ computed: {
107+ files () {
108+ return this .$refs .input .files
109+ }
110+ }
111+ }
112+ script >
0 commit comments