From 6ff8586cfdae3893b2fd21ef975b8432fc68a760 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Nov 2018 17:52:24 -0400 Subject: [PATCH 1/8] feat(form-file): reset file input when value set to null or empty string As an alternative to calling the `reset()` method, users can now clear the form file input by setting the v-model to null or an empty string. The watcher checks for null and empty string and internally calls reset() --- src/components/form-file/form-file.js | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js index c1d374fc724..11f9b558179 100644 --- a/src/components/form-file/form-file.js +++ b/src/components/form-file/form-file.js @@ -80,6 +80,9 @@ export default { } }, props: { + value: { + default: null + }, accept: { type: String, default: '' @@ -152,6 +155,11 @@ export default { } else { this.$emit('input', newVal) } + }, + value (newVal) { + if (newVal === null || newVal === '') { + this.reset() + } } }, methods: { From 03c7e05b6eb0b4ee79f7d0a7388f3230f969d7e9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Nov 2018 18:04:18 -0400 Subject: [PATCH 2/8] Update form-file.js --- src/components/form-file/form-file.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js index 11f9b558179..70c6719fc98 100644 --- a/src/components/form-file/form-file.js +++ b/src/components/form-file/form-file.js @@ -36,7 +36,8 @@ export default { on: { change: this.onFileChange, focusin: this.focusHandler, - focusout: this.focusHandler + focusout: this.focusHandler, + reset: this.onReset } }) @@ -224,6 +225,10 @@ export default { this.selectedFile = files[0] } }, + onReset () { + // Triggered when the parent form (if any) is reset + this.selectedFile = this.multiple ? [] : null + }, onDragover (evt) { evt.preventDefault() evt.stopPropagation() From ff0ba56d358e84670029ee32c5ecbbffdc6d7bd7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Nov 2018 18:13:17 -0400 Subject: [PATCH 3/8] Update README.md --- src/components/form-file/README.md | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md index 56f128d7839..6ebad73e9ec 100755 --- a/src/components/form-file/README.md +++ b/src/components/form-file/README.md @@ -145,18 +145,20 @@ assitive technologies. ## Clearing the file selection -Because of limitations in the value binding with `` elements, `v-model` -for `` is unidirectional, and cannot be used to set or clear the file(s) selection. -To get around this limitation, `` provides a `reset()` method that can be +With inputs of type file, normally the `v-model` is uni-directional (meaning +you cannot pre-set the selected files). However, you can clear the file input's +selected files by setting the `v-model` to either `null` or an empty string. +Alternatively, `` provides a `reset()` method that can be called to clear the file input. To take advantage of the `reset()` method, you will need to obtain a reference -to the `` component: +to the `` component. ```html
- - Reset + + Reset via method + Reset via v-model
``` From 8cc93db606d785d17ea68e2c2f2378feb0be3be3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Nov 2018 18:20:07 -0400 Subject: [PATCH 4/8] Update README.md --- src/components/form-file/README.md | 23 +++++++++++++---------- 1 file changed, 13 insertions(+), 10 deletions(-) diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md index 6ebad73e9ec..b72b74cf227 100755 --- a/src/components/form-file/README.md +++ b/src/components/form-file/README.md @@ -155,16 +155,16 @@ To take advantage of the `reset()` method, you will need to obtain a reference to the `` component. ```html -
- - Reset via method - Reset via v-model -
-``` + -```js -window.app = new Vue({ - el: '#app', + + + ``` From bb84904a1558f7cb2147feb7c9a385182f4add61 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Nov 2018 18:30:06 -0400 Subject: [PATCH 5/8] Update README.md --- src/components/form-file/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md index b72b74cf227..47875d86bed 100755 --- a/src/components/form-file/README.md +++ b/src/components/form-file/README.md @@ -157,7 +157,7 @@ to the `` component. ```html From 88d76262fb97859ef04da67c820608a55d0f337a Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Nov 2018 20:32:08 -0400 Subject: [PATCH 7/8] Update form-file.js test for empty array on value --- src/components/form-file/form-file.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js index 70c6719fc98..3970e99441b 100644 --- a/src/components/form-file/form-file.js +++ b/src/components/form-file/form-file.js @@ -2,7 +2,7 @@ import idMixin from '../../mixins/id' import formMixin from '../../mixins/form' import formStateMixin from '../../mixins/form-state' import formCustomMixin from '../../mixins/form-custom' -import { from as arrayFrom } from '../../utils/array' +import { from as arrayFrom, isArray } from '../../utils/array' // temporary css until Bootstrap V4.2 is released import './form-file.css' @@ -158,7 +158,7 @@ export default { } }, value (newVal) { - if (newVal === null || newVal === '') { + if (!newVal || (isArray(newVal) && newVal.length === 0)) { this.reset() } } From f52b3502b447fd63f8dcf240ff6e203b90d1f3b7 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Nov 2018 20:38:51 -0400 Subject: [PATCH 8/8] Update README.md --- src/components/form-file/README.md | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md index e0c39009dda..ae908660fc3 100755 --- a/src/components/form-file/README.md +++ b/src/components/form-file/README.md @@ -147,12 +147,12 @@ assitive technologies. ## Clearing the file selection With inputs of type file, normally the `v-model` is uni-directional (meaning you cannot pre-set the selected files). However, you can clear the file input's -selected files by setting the `v-model` to either `null` or an empty string. -Alternatively, `` provides a `reset()` method that can be -called to clear the file input. +selected files by setting the `v-model` to either `null`, an empty string, or an +empty array). -To take advantage of the `reset()` method, you will need to obtain a reference -to the `` component. +Alternatively, `` provides a `reset()` method that can be called to +clear the file input. To take advantage of the `reset()` method, you will need +to obtain a reference to the `` component. ```html