fix(form-file): fix drag and drop feature (bootstrap-vue#2169)

tmorehouse · web-flow · commit 07bfc29e6413 · 2018-11-13T17:40:15.000-04:00
* fix(form-file): fix drag and drop feature

adds missing handler registration, and adds optional drop placeholder.

* Update README.md

* Update README.md
diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md
@@ -7,7 +7,10 @@ multiple files, and directory upload (for browsers that support directory mode)
 <template>
 <div>
   <!-- Styled -->
-  <b-form-file v-model="file" :state="Boolean(file)" placeholder="Choose a file..."></b-form-file>
+  <b-form-file v-model="file"
+               :state="Boolean(file)"
+               placeholder="Choose a file..."
+               drop-placeholder="Drop file here..."></b-form-file>
   <div class="mt-3">Selected file: {{file && file.name}}</div>
 
   <!-- Plain mode -->
@@ -59,10 +62,16 @@ be relied for production.
 
 Directory mode is not supported when the file input is in plain mode.
 
-## Drag and Drop
+
+## Drag and Drop support
 Drop mode is enabled by default. It can disabled by setting the `no-drop`
 prop. `no-drop`has no effect in plain mode.
 
+You can optionally set a different placeholder while dragging via the
+`drop-placeholder` prop. The default is no drop placeholder text. Only
+plain text is supported. HTML and components are not supported. The
+`drop-placeholder` prop has no effect if `no-drop`is set or in `plain` mode,
+
 
 ## Limiting to certain file types
 You can limit the file types by setting the `accept` prop to a string containing the
@@ -90,7 +99,7 @@ list of standard media types.
 
 ## Customize the placeholder text
 Use the prop `placeholder` to change the prompt text that is shown when no
-files are selected.
+files are selected. Only plain text is supported. HTML and components are not supported.
 
 
 ## Customize browse button label
@@ -104,12 +113,13 @@ Also it is advised to use [:lang()](https://developer.mozilla.org/en-US/docs/Web
 ```
 
 Alternatively you can set the content of the custom file browe button
-text via the `browse-text` prop. Note, only plain text is supported. HTML or
-sub-components are not supported.
+text via the `browse-text` prop. Note, only plain text is supported. HTML and
+components are not supported.
 
 
 ## Non custom file input
 You can have `<b-form-file>` render a browser native file input by setting the `plain` prop.
+Note that many of the customer form-file features do not apply when `plain` is set.
 
 
 ## Contextual state feedback
diff --git a/src/components/form-file/form-file.js b/src/components/form-file/form-file.js
@@ -63,7 +63,11 @@ export default {
       {
         class: ['custom-file', 'b-form-file', this.stateClass],
         attrs: { id: this.safeId('_BV_file_outer_') },
-        on: { dragover: this.dragover }
+        on: {
+          dragover: this.onDragover,
+          dragleave: this.onDragleave,
+          drop: this.onDrop
+        }
       },
       [input, label]
     )
@@ -93,6 +97,10 @@ export default {
       type: String,
       default: null
     },
+    dropPlaceholder: {
+      type: String,
+      default: null
+    },
     multiple: {
       type: Boolean,
       default: false
@@ -112,6 +120,11 @@ export default {
   },
   computed: {
     selectLabel () {
+      // Draging active
+      if (this.dragging && this.dropPlaceholder) {
+        return this.dropPlaceholder
+      }
+
       // No file choosen
       if (!this.selectedFile || this.selectedFile.length === 0) {
         return this.placeholder
@@ -203,7 +216,7 @@ export default {
         this.selectedFile = files[0]
       }
     },
-    dragover (evt) {
+    onDragover (evt) {
       evt.preventDefault()
       evt.stopPropagation()
       if (this.noDrop || !this.custom) {
@@ -212,12 +225,12 @@ export default {
       this.dragging = true
       evt.dataTransfer.dropEffect = 'copy'
     },
-    dragleave (evt) {
+    onDragleave (evt) {
       evt.preventDefault()
       evt.stopPropagation()
       this.dragging = false
     },
-    drop (evt) {
+    onDrop (evt) {
       evt.preventDefault()
       evt.stopPropagation()
       if (this.noDrop) {
