diff --git a/README.md b/README.md index 0d4b5e0..5605fb3 100644 --- a/README.md +++ b/README.md @@ -46,6 +46,17 @@ In this event you can get the information of the whole file. } ``` +### Multiple Files + +By default the component only allows to select one file, but you can change that using the allow-multiple +prop. + +```html + +``` + +The only difference is the event now return an array instead an object. + ## Build Setup ``` bash diff --git a/package.json b/package.json index 9c1bdb1..e45e577 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "vue-six-four", - "version": "1.0.7", + "version": "1.1.0", "description": "vue component which generate base64 from a file", "author": "Eduardo P. Rivero", "main": "dist/vue-six-four.min.js", diff --git a/src/App.vue b/src/App.vue index 45f437e..d4a3c41 100644 --- a/src/App.vue +++ b/src/App.vue @@ -4,16 +4,39 @@

Vue SixFour Component

- -
- Vue Six Four -
-
Name: {{file64.name}}
-
Type: {{file64.type}}
-
Size: {{file64.size}}
-
SixFour: {{file64.sixFour}}
+
+
+

Single File

+
+ +
+ Vue Six Four +
+
Name: {{file64.name}}
+
Type: {{file64.type}}
+
Size: {{file64.size}}
+
SixFour: {{file64.sixFour}}
+
+
+
+
+
+

Multiple File

+
+ +
+ Vue Six Four +
+
Name: {{image.name}}
+
Type: {{image.type}}
+
Size: {{image.size}}
+
SixFour: {{image.sixFour}}
+
@@ -27,6 +50,10 @@ function getFileInfo(fileInfo) { this.file64 = fileInfo; } +function getFiles(files) { + this.images = files; +} + export default { name: 'app', components: { @@ -35,10 +62,12 @@ export default { data() { return { file64: {}, + images: [], }; }, methods: { getFileInfo, + getFiles, }, }; diff --git a/src/components/VueSixFour.vue b/src/components/VueSixFour.vue index d427ea9..6cd5214 100644 --- a/src/components/VueSixFour.vue +++ b/src/components/VueSixFour.vue @@ -1,42 +1,46 @@