Skip to content

Commit 08c1e89

Browse files
KaelWDKaelWD
committed
fix(VFileInput): allow multiple to be bound as false
fixes #9530
1 parent 00605f5 commit 08c1e89

File tree

3 files changed

+65
-17
lines changed

3 files changed

+65
-17
lines changed

Diff for: ‎packages/vuetify/src/components/VFileInput/VFileInput.ts

+7-7
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,7 @@ export default VTextField.extend({
3838
default: '$vuetify.fileInput.counter',
3939
},
4040
hideInput: Boolean,
41+
multiple: Boolean,
4142
placeholder: String,
4243
prependIcon: {
4344
type: String,
@@ -82,7 +83,7 @@ export default VTextField.extend({
8283
}
8384
},
8485
computedCounterValue (): string {
85-
const fileCount = (this.isMultiple && this.lazyValue)
86+
const fileCount = (this.multiple && this.lazyValue)
8687
? this.lazyValue.length
8788
: (this.lazyValue instanceof File) ? 1 : 0
8889

@@ -116,9 +117,6 @@ export default VTextField.extend({
116117
isLabelActive (): boolean {
117118
return this.isDirty
118119
},
119-
isMultiple (): boolean {
120-
return this.$attrs.hasOwnProperty('multiple')
121-
},
122120
text (): string[] {
123121
if (!this.isDirty && (this.isFocused || !this.hasLabel)) return [this.placeholder]
124122

@@ -151,7 +149,7 @@ export default VTextField.extend({
151149
immediate: true,
152150
},
153151
value (v) {
154-
const value = this.isMultiple ? v : v ? [v] : []
152+
const value = this.multiple ? v : v ? [v] : []
155153
if (!deepEqual(value, this.$refs.input.files)) {
156154
// When the input value is changed programatically, clear the
157155
// internal input's value so that the `onInput` handler
@@ -165,7 +163,7 @@ export default VTextField.extend({
165163

166164
methods: {
167165
clearableCallback () {
168-
this.internalValue = this.isMultiple ? [] : null
166+
this.internalValue = this.multiple ? [] : null
169167
this.$refs.input.value = ''
170168
},
171169
genChips () {
@@ -197,6 +195,8 @@ export default VTextField.extend({
197195
genInput () {
198196
const input = VTextField.options.methods.genInput.call(this)
199197

198+
input.data!.attrs!.multiple = this.multiple
199+
200200
// We should not be setting value
201201
// programmatically on the input
202202
// when it is using type="file"
@@ -267,7 +267,7 @@ export default VTextField.extend({
267267
onInput (e: Event) {
268268
const files = [...(e.target as HTMLInputElement).files || []]
269269

270-
this.internalValue = this.isMultiple ? files : files[0]
270+
this.internalValue = this.multiple ? files : files[0]
271271

272272
// Set initialValue here otherwise isFocused
273273
// watcher in VTextField will emit a change

Diff for: ‎packages/vuetify/src/components/VFileInput/__tests__/VFileInput.spec.ts

+8
Original file line numberDiff line numberDiff line change
@@ -42,6 +42,14 @@ describe('VFileInput.ts', () => {
4242
expect(wrapper.html()).toMatchSnapshot()
4343
})
4444

45+
it('should render multiple', () => {
46+
const wrapper = mountFunction({
47+
propsData: { multiple: true },
48+
})
49+
50+
expect(wrapper.html()).toMatchSnapshot()
51+
})
52+
4553
it('should render counter', () => {
4654
const wrapper = mountFunction({
4755
propsData: {

Diff for: ‎packages/vuetify/src/components/VFileInput/__tests__/__snapshots__/VFileInput.spec.ts.snap

+50-10
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ exports[`VFileInput.ts should be unclearable 1`] = `
1717
<div class="v-text-field__slot">
1818
<div class="v-file-input__text">
1919
</div>
20-
<input id="input-24"
20+
<input id="input-29"
2121
type="file"
2222
>
2323
</div>
@@ -53,7 +53,7 @@ exports[`VFileInput.ts should display file size 1`] = `
5353
<div class="v-file-input__text">
5454
test (2.1 MB)
5555
</div>
56-
<input id="input-12"
56+
<input id="input-17"
5757
type="file"
5858
>
5959
</div>
@@ -99,7 +99,7 @@ exports[`VFileInput.ts should display file size 2`] = `
9999
<div class="v-file-input__text">
100100
test (2.1 MB)
101101
</div>
102-
<input id="input-12"
102+
<input id="input-17"
103103
type="file"
104104
>
105105
</div>
@@ -145,7 +145,7 @@ exports[`VFileInput.ts should display total size in counter 1`] = `
145145
<div class="v-file-input__text">
146146
2 files
147147
</div>
148-
<input id="input-18"
148+
<input id="input-23"
149149
type="file"
150150
>
151151
</div>
@@ -194,7 +194,7 @@ exports[`VFileInput.ts should display total size in counter 2`] = `
194194
<div class="v-file-input__text">
195195
2 files
196196
</div>
197-
<input id="input-18"
197+
<input id="input-23"
198198
type="file"
199199
>
200200
</div>
@@ -286,7 +286,7 @@ exports[`VFileInput.ts should render chips 1`] = `
286286
</span>
287287
</span>
288288
</div>
289-
<input id="input-62"
289+
<input id="input-67"
290290
type="file"
291291
>
292292
</div>
@@ -332,7 +332,7 @@ exports[`VFileInput.ts should render counter 1`] = `
332332
<div class="v-file-input__text">
333333
test
334334
</div>
335-
<input id="input-6"
335+
<input id="input-11"
336336
type="file"
337337
>
338338
</div>
@@ -363,6 +363,46 @@ exports[`VFileInput.ts should render counter 1`] = `
363363
</div>
364364
`;
365365
366+
exports[`VFileInput.ts should render multiple 1`] = `
367+
<div class="v-input theme--light v-text-field v-file-input">
368+
<div class="v-input__prepend-outer">
369+
<div class="v-input__icon v-input__icon--prepend">
370+
<button type="button"
371+
aria-label="prepend icon"
372+
class="v-icon notranslate v-icon--link material-icons theme--light"
373+
>
374+
$file
375+
</button>
376+
</div>
377+
</div>
378+
<div class="v-input__control">
379+
<div class="v-input__slot">
380+
<div class="v-text-field__slot">
381+
<div class="v-file-input__text">
382+
</div>
383+
<input id="input-6"
384+
type="file"
385+
multiple="multiple"
386+
>
387+
</div>
388+
<div class="v-input__append-inner">
389+
<div>
390+
</div>
391+
</div>
392+
</div>
393+
<div class="v-text-field__details">
394+
<div class="v-messages theme--light">
395+
<span name="message-transition"
396+
tag="div"
397+
class="v-messages__wrapper"
398+
>
399+
</span>
400+
</div>
401+
</div>
402+
</div>
403+
</div>
404+
`;
405+
366406
exports[`VFileInput.ts should render small chips 1`] = `
367407
<div class="v-input v-input--is-label-active v-input--is-dirty theme--light v-text-field v-file-input">
368408
<div class="v-input__prepend-outer">
@@ -385,7 +425,7 @@ exports[`VFileInput.ts should render small chips 1`] = `
385425
</span>
386426
</span>
387427
</div>
388-
<input id="input-69"
428+
<input id="input-74"
389429
type="file"
390430
>
391431
</div>
@@ -420,7 +460,7 @@ exports[`VFileInput.ts should render without icon 1`] = `
420460
<div class="v-text-field__slot">
421461
<div class="v-file-input__text">
422462
</div>
423-
<input id="input-76"
463+
<input id="input-81"
424464
type="file"
425465
>
426466
</div>
@@ -461,7 +501,7 @@ exports[`VFileInput.ts should set display none if hide-input prop is set 1`] = `
461501
<div class="v-text-field__slot">
462502
<div class="v-file-input__text">
463503
</div>
464-
<input id="input-102"
504+
<input id="input-107"
465505
type="file"
466506
>
467507
</div>

0 commit comments

Comments
 (0)