Merge pull request #6 from eperedo/issue-5

feat(SixFour): Allow multiple files

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
+<vue-six-four v-on:vue-six-four="getFileInfo" v-bind:allow-multiple="true">
+```
+
+The only difference is the event now return an array instead an object.
+
 ## Build Setup
 
 ``` bash

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",

src/App.vue

@@ -4,16 +4,39 @@
 			<h1>Vue SixFour Component</h1>
 		</header>
 		<main>
-			<vue-six-four v-on:vue-six-four="getFileInfo"
-			/>
-			<div class="image-container">
-				<img v-bind:src="file64.sixFour" width="200"
-				  height="200" alt="Vue Six Four" />
-				<div class="file-info">
-					<pre>Name: {{file64.name}}</pre>
-					<pre>Type: {{file64.type}}</pre>
-					<pre>Size: {{file64.size}}</pre>
-					<pre class="six-four">SixFour: {{file64.sixFour}}</pre>
+			<div class="example">
+				<header>
+					<h2>Single File</h2>
+				</header>
+				<vue-six-four v-on:vue-six-four="getFileInfo"
+				/>
+				<div class="image-container">
+					<img v-bind:src="file64.sixFour" width="200"
+					  height="200" alt="Vue Six Four" />
+					<div class="file-info">
+						<pre>Name: {{file64.name}}</pre>
+						<pre>Type: {{file64.type}}</pre>
+						<pre>Size: {{file64.size}}</pre>
+						<pre class="six-four">SixFour: {{file64.sixFour}}</pre>
+					</div>
+				</div>
+			</div>
+			<div class="example">
+				<header>
+					<h2>Multiple File</h2>
+				</header>
+				<vue-six-four v-on:vue-six-four="getFiles"
+				  v-bind:allow-multiple="true" />
+				<div class="image-container" v-for="image in images"
+				  v-bind:key="image.name">
+					<img v-bind:src="image.sixFour" width="200"
+					  height="200" alt="Vue Six Four" />
+					<div class="file-info">
+						<pre>Name: {{image.name}}</pre>
+						<pre>Type: {{image.type}}</pre>
+						<pre>Size: {{image.size}}</pre>
+						<pre class="six-four">SixFour: {{image.sixFour}}</pre>
+					</div>
 				</div>
 			</div>
 		</main>
@@ -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,
 	},
 };
 </script>

src/components/VueSixFour.vue

@@ -1,42 +1,46 @@
 <template>
 	<input type="file" v-on:change="readFile"
-	/>
+	  v-bind:multiple="allowMultiple" />
 </template>
 
 <script>
 
 function data() {
 	return {
-		fr: null,
+		multipleFiles: [],
 	};
 }
 
-function destroyed() {
-	if (this.fr) {
-		this.fr.removeEventListener('load');
-	}
-}
-
-function getSixFourData(file) {
-	const newFile = Object.assign(file, { sixFour: this.fr.result });
-	this.$emit('vue-six-four', newFile);
-}
-
 function readFile(e) {
-	const file = e.target.files[0];
-	if (file) {
-		this.fr = new FileReader();
-		this.fr.addEventListener('load', getSixFourData.bind(this, file));
-		this.fr.readAsDataURL(file);
+	const files = e.target.files;
+	const totalFiles = files.length;
+	for (let index = 0; index < totalFiles; index += 1) {
+		const file = files[index];
+		let reader = new FileReader();
+		reader.readAsDataURL(file);
+		reader.addEventListener('load', () => {
+			const result = Object.assign(file, { sixFour: reader.result });
+			this.multipleFiles.push(result);
+			if (totalFiles === this.multipleFiles.length) {
+				this.$emit('vue-six-four', this.allowMultiple ? this.multipleFiles : this.multipleFiles[0]);
+				this.multipleFiles = [];
+			}
+			reader = null;
+		});
 	}
 }
 
 export default {
 	data,
 	name: 'vue-six-four',
-	destroyed,
 	methods: {
 		readFile,
 	},
+	props: {
+		allowMultiple: {
+			type: Boolean,
+			default: false,
+		},
+	},
 };
 </script>