fix(b-form-file): fix prop type checking for value prop (#4168)

Author: tmorehouse

src/components/form-file/README.md

@@ -253,7 +253,7 @@ assistive technologies.
 
 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`, an empty string `''`, or an empty array `[]`).
+either `null` (for single mode) or an empty array `[]` (for multiple/directory mode).
 
 Alternatively, `<b-form-file>` 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

src/components/form-file/form-file.js

@@ -1,8 +1,9 @@
 import Vue from '../../utils/vue'
 import { from as arrayFrom, isArray, concat } from '../../utils/array'
 import { getComponentConfig } from '../../utils/config'
-import { isFunction } from '../../utils/inspect'
+import { isFile, isFunction, isUndefinedOrNull } from '../../utils/inspect'
 import { File } from '../../utils/safe-types'
+import { warn } from '../../utils/warn'
 import formCustomMixin from '../../mixins/form-custom'
 import formMixin from '../../mixins/form'
 import formStateMixin from '../../mixins/form-state'
@@ -27,7 +28,21 @@ export const BFormFile = /*#__PURE__*/ Vue.extend({
     },
     value: {
       type: [File, Array],
-      default: null
+      default: null,
+      validator: val => {
+        /* istanbul ignore next */
+        if (val === '') {
+          warn(
+            `${NAME} - setting value/v-model to an empty string for reset is deprecated. Set to 'null' instead`
+          )
+          return true
+        }
+        return (
+          isUndefinedOrNull(val) ||
+          isFile(val) ||
+          (isArray(val) && (val.length === 0 || val.every(isFile)))
+        )
+      }
     },
     accept: {
       type: String,

src/components/form-file/form-file.spec.js

@@ -340,7 +340,7 @@ describe('form-file', () => {
     const wrapper = mount(BFormFile, {
       propsData: {
         id: 'foo',
-        value: ''
+        value: null
       }
     })
     const file1 = new File(['foo'], 'foo.txt', {
@@ -358,8 +358,7 @@ describe('form-file', () => {
     wrapper.setProps({ value: null })
     await waitNT(wrapper.vm)
 
-    expect(wrapper.emitted('input').length).toEqual(2)
-    expect(wrapper.emitted('input')[1][0]).toEqual(null)
+    expect(wrapper.emitted('input').length).toEqual(1)
 
     wrapper.destroy()
   })

src/components/form-file/package.json

@@ -13,7 +13,7 @@
         "props": [
           {
             "prop": "value",
-            "description": "The current value of the file input. Will be an array if multiple or directory is set. Can be set to null or empty array to reset the file input"
+            "description": "The current value of the file input. Will be a single File object or an array of File objects (if multiple or directory is set). Can be set to null, or an empty array to reset the file input"
           },
           {
             "prop": "accept",

src/utils/inspect.js

@@ -1,5 +1,6 @@
 import { isArray } from './array'
 import { isObject, isPlainObject } from './object'
+import { File } from './safe-types'
 
 // --- Convenience inspection utilities ---
 
@@ -29,6 +30,8 @@ export const isDate = val => val instanceof Date
 
 export const isEvent = val => val instanceof Event
 
+export const isFile = val => val instanceof File
+
 export const isRegExp = val => toRawType(val) === 'RegExp'
 
 export const isPromise = val =>