Add upload directory

README.md

@@ -107,6 +107,8 @@ npm run build
 
     drop="Boolean (true = $parent) or Element or Css Selector"
 
+    dropDirectory="true or false"
+
     extensions="Array or String or Regular"
 
     post-action="./post.method"
@@ -117,6 +119,8 @@ npm run build
 
     multiple="true or false"
 
+    directory="true or false"
+
     size="max Size"
 
     timeout="3600000"

dist/example.js

@@ -8119,7 +8119,9 @@
 	
 	
 	      multiple: true,
+	      directory: false,
 	      drop: true,
+	      dropDirectory: false,
 	      thread: 3,
 	      name: 'file',
 	
@@ -8148,6 +8150,15 @@
 	  },
 	
 	  methods: {
+	    addDirectory: function addDirectory() {
+	      var _this = this;
+	
+	      this.directory = true;
+	      this.$nextTick(function () {
+	        _this.$refs.upload.$el.querySelector('input').click();
+	        _this.directory = false;
+	      });
+	    },
 	    filter: function filter(file) {
 	      if (file.size < 100 * 1024) {
 	        file = this.$refs.upload.update(file, { error: 'size' });
@@ -8235,6 +8246,10 @@
 	      default: false
 	    },
 	
+	    dropDirectory: {
+	      default: true
+	    },
+	
 	    extensions: {
 	      default: Array
 	    },
@@ -8255,6 +8270,10 @@
 	      type: Boolean
 	    },
 	
+	    directory: {
+	      type: Boolean
+	    },
+	
 	    timeout: {
 	      type: Number,
 	      default: 0
@@ -8263,7 +8282,6 @@
 	    size: {
 	      type: Number
 	    },
-	
 	    headers: {
 	      type: Object,
 	      default: Object
@@ -8454,7 +8472,7 @@
 	        file = {
 	          file: file,
 	          size: file.size,
-	          name: file.name,
+	          name: file.webkitRelativePath || file.name,
 	          type: file.type
 	        };
 	      }
@@ -8521,7 +8539,7 @@
 	          var _file = el.files[i];
 	          this.add({
 	            size: _file.size,
-	            name: _file.name,
+	            name: _file.webkitRelativePath || _file.name,
 	            type: _file.type,
 	            file: _file,
 	            el: el
@@ -8562,7 +8580,7 @@
 	          });
 	        });
 	        return 1;
-	      } else if (entry.isDirectory) {
+	      } else if (entry.isDirectory && this.dropDirectory) {
 	        var count = 0;
 	        entry.createReader().readEntries(function (entrys) {
 	          for (var i = 0; i < entrys.length; i++) {
@@ -10426,6 +10444,7 @@
 	      "name": _vm.$parent.name,
 	      "id": _vm.$parent.id || _vm.$parent.name,
 	      "accept": _vm.$parent.accept,
+	      "webkitdirectory": _vm.$parent.directory && _vm.$parent.mode === 'html5',
 	      "multiple": _vm.$parent.multiple && _vm.$parent.mode === 'html5'
 	    },
 	    on: {
@@ -10496,11 +10515,13 @@
 	      "extensions": _vm.extensions,
 	      "accept": _vm.accept,
 	      "multiple": _vm.multiple,
+	      "directory": _vm.directory,
 	      "size": _vm.size || 0,
 	      "thread": _vm.thread < 1 ? 1 : (_vm.thread > 5 ? 5 : _vm.thread),
 	      "headers": _vm.headers,
 	      "data": _vm.data,
-	      "drop": _vm.drop
+	      "drop": _vm.drop,
+	      "dropDirectory": _vm.dropDirectory
 	    },
 	    on: {
 	      "input-file": _vm.inputFile
@@ -10513,6 +10534,13 @@
 	      expression: "files"
 	    }
 	  }, [_vm._v("\n              Add upload files\n            ")])], 1), _vm._v(" "), _c('td', [_c('button', {
+	    on: {
+	      "click": function($event) {
+	        $event.preventDefault();
+	        _vm.addDirectory($event)
+	      }
+	    }
+	  }, [_vm._v("Add upload directory")]), _vm._v(" "), _c('br'), _vm._v("Only support chrome\n          ")]), _vm._v(" "), _c('td', [_c('button', {
 	    directives: [{
 	      name: "show",
 	      rawName: "v-show",

dist/vue-upload-component.js

@@ -918,6 +918,10 @@ module.exports =
 	      default: false
 	    },
 	
+	    dropDirectory: {
+	      default: true
+	    },
+	
 	    extensions: {
 	      default: Array
 	    },
@@ -938,6 +942,10 @@ module.exports =
 	      type: Boolean
 	    },
 	
+	    directory: {
+	      type: Boolean
+	    },
+	
 	    timeout: {
 	      type: Number,
 	      default: 0
@@ -946,7 +954,6 @@ module.exports =
 	    size: {
 	      type: Number
 	    },
-	
 	    headers: {
 	      type: Object,
 	      default: Object
@@ -1137,7 +1144,7 @@ module.exports =
 	        file = {
 	          file: file,
 	          size: file.size,
-	          name: file.name,
+	          name: file.webkitRelativePath || file.name,
 	          type: file.type
 	        };
 	      }
@@ -1204,7 +1211,7 @@ module.exports =
 	          var _file = el.files[i];
 	          this.add({
 	            size: _file.size,
-	            name: _file.name,
+	            name: _file.webkitRelativePath || _file.name,
 	            type: _file.type,
 	            file: _file,
 	            el: el
@@ -1245,7 +1252,7 @@ module.exports =
 	          });
 	        });
 	        return 1;
-	      } else if (entry.isDirectory) {
+	      } else if (entry.isDirectory && this.dropDirectory) {
 	        var count = 0;
 	        entry.createReader().readEntries(function (entrys) {
 	          for (var i = 0; i < entrys.length; i++) {
@@ -3149,6 +3156,7 @@ module.exports =
 	      "name": _vm.$parent.name,
 	      "id": _vm.$parent.id || _vm.$parent.name,
 	      "accept": _vm.$parent.accept,
+	      "webkitdirectory": _vm.$parent.directory && _vm.$parent.mode === 'html5',
 	      "multiple": _vm.$parent.multiple && _vm.$parent.mode === 'html5'
 	    },
 	    on: {

example/Home.vue

@@ -89,17 +89,23 @@ table th,table td {
                 :extensions="extensions"
                 :accept="accept"
                 :multiple="multiple"
+                :directory="directory"
                 :size="size || 0"
                 :thread="thread < 1 ? 1 : (thread > 5 ? 5 : thread)"
                 :headers="headers"
                 :data="data"
                 :drop="drop"
+                :dropDirectory="dropDirectory"
                 v-model="files"
                 @input-file="inputFile"
                 ref="upload">
                 Add upload files
               </file-upload>
             </td>
+            <td>
+              <button @click.prevent="addDirectory">Add upload directory</button>
+              <br/>Only support chrome
+            </td>
             <td>
               <button v-show="!$refs.upload || !$refs.upload.active" @click.prevent="$refs.upload.active = true" type="button">Start upload</button>
               <button v-show="$refs.upload && $refs.upload.active" @click.prevent="$refs.upload.active = false" type="button">Stop upload</button>
@@ -184,7 +190,9 @@ export default {
       // extensions: /\.(gif|jpe?g|png|webp)$/i,
 
       multiple: true,
+      directory: false,
       drop: true,
+      dropDirectory: false,
       thread: 3,
       name: 'file',
 
@@ -213,6 +221,16 @@ export default {
   },
 
   methods: {
+
+    // add Directory
+    addDirectory() {
+      this.directory = true
+      this.$nextTick(() => {
+        this.$refs.upload.$el.querySelector('input').click()
+        this.directory = false
+      })
+    },
+
     // Custom filter
     filter(file) {
       // min size

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-upload-component",
   "description": "Vue.js file upload component, Support for multiple file uploads, progress, html5, html4, support ie9",
-  "version": "2.4.0-beta.2",
+  "version": "2.4.0-beta.3",
   "author": "LianYue",
   "scripts": {
     "dev": "webpack-dev-server --inline --hot",

src/FileUpload.vue

@@ -46,6 +46,10 @@ export default {
       default: false,
     },
 
+    dropDirectory: {
+      default: true,
+    },
+
     extensions: {
       default: Array,
     },
@@ -66,6 +70,10 @@ export default {
       type: Boolean,
     },
 
+    directory: {
+      type: Boolean,
+    },
+
     timeout: {
       type: Number,
       default: 0,
@@ -74,7 +82,6 @@ export default {
     size: {
       type: Number,
     },
-
     headers: {
       type: Object,
       default: Object,
@@ -271,7 +278,7 @@ export default {
         file = {
           file,
           size: file.size,
-          name: file.name,
+          name: file.webkitRelativePath || file.name,
           type: file.type,
         }
       }
@@ -354,7 +361,7 @@ export default {
           let file = el.files[i]
           this.add({
             size: file.size,
-            name: file.name,
+            name: file.webkitRelativePath || file.name,
             type: file.type,
             file,
             el
@@ -398,7 +405,7 @@ export default {
           })
         });
         return 1
-      } else if (entry.isDirectory) {
+      } else if (entry.isDirectory && this.dropDirectory) {
         var count =  0
         entry.createReader().readEntries((entrys) => {
           for (var i = 0; i < entrys.length; i++) {
@@ -923,7 +930,7 @@ export default {
             this.add(item.getAsFile())
           }
           if (!this.multiple) {
-            break;
+            break
           }
         }
       } else if (dataTransfer.files.length) {
@@ -931,7 +938,7 @@ export default {
           let file = dataTransfer.files[i]
           this.add(file)
           if (!this.multiple) {
-            break;
+            break
           }
         }
       }

src/InputFile.vue

@@ -5,6 +5,7 @@
     :id="$parent.id || $parent.name"
     :accept="$parent.accept"
     @change="change"
+    :webkitdirectory="$parent.directory && $parent.mode === 'html5'"
     :multiple="$parent.multiple && $parent.mode === 'html5'"
   />
 </template>