add 'drop-auto-hide-time' to take control of 'dropActive' property

docs/docs/en.md

@@ -516,7 +516,7 @@ Custom upload method
 
 * **Default:** `undefined`
 
-* **Details:**  
+* **Details:**
 
   `custom-action` priority than `put-action, post-action`
 
@@ -764,21 +764,21 @@ All the options to handle chunk uploads
 * **Type:** `Object`
 
 * **Default:**
-```js
-{
-    headers: {
-      'Content-Type': 'application/json'
-    },
-    action: '',
-    minSize: 1048576,
-    maxActive: 3,
-    maxRetries: 5,
-
-    // This is the default Handler implemented in this package
-    // you can use your own handler if your protocol is different
-    handler: ChunkUploadDefaultHandler
-}
-```
+  ```js
+  {
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      action: '',
+      minSize: 1048576,
+      maxActive: 3,
+      maxRetries: 5,
+
+      // This is the default Handler implemented in this package
+      // you can use your own handler if your protocol is different
+      handler: ChunkUploadDefaultHandler
+  }
+  ```
 
 ### drop
 
@@ -799,7 +799,22 @@ Drag and drop upload
   <file-upload :drop="true"></file-upload>
   ```
 
+### drop-auto-hide-time
+
+Specify the seconds to automatically set `dropActive` to false.
+
+* **Type:** `Number`
+
+* **Default:** `1000`
 
+* **Details:**
+
+  If this property is set to `0` the `dropActive` will keep `true` until the user drop the file or leave the drop area. If set to a positive number then the `dropActive` will be set to `false` after the time specified in this property in seconds.
+
+* **Usage:**
+  ```html
+  <file-upload :drop-auto-hide-time="0"></file-upload>
+  ```
 
 
 

docs/views/examples/Full.vue

@@ -96,6 +96,7 @@
           :headers="headers"
           :data="data"
           :drop="drop"
+          :drop-auto-hide-time="dropAutoHideTime"
           :drop-directory="dropDirectory"
           :add-index="addIndex"
           v-model="files"
@@ -401,6 +402,7 @@ export default {
       multiple: true,
       directory: false,
       drop: true,
+      dropAutoHideTime: 2000,
       dropDirectory: true,
       addIndex: false,
       thread: 3,

src/FileUpload.vue

@@ -126,6 +126,11 @@ export default {
       default: false,
     },
 
+    dropAutoHideTime: {
+      type: Number,
+      default: 1000
+    },
+
     dropDirectory: {
       type: Boolean,
       default: true,
@@ -297,7 +302,7 @@ export default {
         this.$parent.$forceUpdate()
       }
     },
-    
+
 
     drop(value) {
       this.watchDrop(value)
@@ -1308,6 +1313,10 @@ export default {
     },
 
     watchDropActive(newDropActive, oldDropActive) {
+      if (this.dropAutoHideTime === 0) {
+        return
+      }
+
       if (newDropActive === oldDropActive) {
         return
       }
@@ -1316,7 +1325,7 @@ export default {
         this.dropTimeout = null
       }
       if (newDropActive) {
-        this.dropTimeout = setTimeout(this.onDocumentDrop, 1000);
+        this.dropTimeout = setTimeout(this.onDocumentDrop, this.dropAutoHide)
       }
     },