nodeodules

public/js/vue/app.js

@@ -43,7 +43,7 @@
 /******/
 /******/ 	// script path function
 /******/ 	function jsonpScriptSrc(chunkId) {
-/******/ 		return __webpack_require__.p + "js/vue/chunks/" + ({}[chunkId]||chunkId) + "." + {"0":"b47d9eaedcbd0f34d95c","1":"1a2ec2568db9e0d01036","2":"4f5525aabb9601dde4be","3":"02c941910d5eee1fceff","4":"df99230719144eec9812","5":"29e184ef07c70ad44e82","6":"2e3cea1e2ee220bcd12d","7":"c74631f669aa8185d603","8":"8e259fe897cde698bfc3","9":"5059ce6d2ab207088c31","10":"1222a2375fd940705a78","11":"a447fe0b0f0e846ad8b1","12":"ab3efed496c91cd795a5","13":"dfe16420782798d2be26","14":"0f6eeb76c4839e34f069","15":"ea55482413b70efcb3f7","16":"a81c0a25caa8d6957a37","17":"39ae6a640f4f7aee70ef","18":"b836f822bb8c2a3c29b5","19":"c27e4577cf5fbce49df4","20":"5ebb0d270ca28e346931","21":"4eab9f986d73cdfc57b2","22":"45e250b6a4deec80f3f9","23":"201dc14ca1c040d23016","24":"d46a5a5f496271a8198c","25":"5e531b62fd7cb4562c0d"}[chunkId] + ".js"
+/******/ 		return __webpack_require__.p + "js/vue/chunks/" + ({}[chunkId]||chunkId) + "." + {"0":"b47d9eaedcbd0f34d95c","1":"1a2ec2568db9e0d01036","2":"4f5525aabb9601dde4be","3":"02c941910d5eee1fceff","4":"df99230719144eec9812","5":"29e184ef07c70ad44e82","6":"2e3cea1e2ee220bcd12d","7":"c74631f669aa8185d603","8":"8e259fe897cde698bfc3","9":"5059ce6d2ab207088c31","10":"1222a2375fd940705a78","11":"a447fe0b0f0e846ad8b1","12":"ab3efed496c91cd795a5","13":"dfe16420782798d2be26","14":"0f6eeb76c4839e34f069","15":"ea55482413b70efcb3f7","16":"a81c0a25caa8d6957a37","17":"39ae6a640f4f7aee70ef","18":"b836f822bb8c2a3c29b5","19":"c27e4577cf5fbce49df4","20":"5ebb0d270ca28e346931","21":"4eab9f986d73cdfc57b2","22":"45e250b6a4deec80f3f9","23":"b317c50e2d5001c94f6c","24":"d46a5a5f496271a8198c","25":"5e531b62fd7cb4562c0d"}[chunkId] + ".js"
 /******/ 	}
 /******/
 /******/ 	// The require function

resources/js/vue/views/TestResult/AddEdit.vue

@@ -71,13 +71,15 @@
             ></v-select>
           </v-flex>
           <v-flex xs12 sm4 md4>
-             <div v-if="!image">
+             <div  >
-                <input type="file" class="inputfile" @change="onFileChange" multiple>
+                <input type="file" class="inputfile" @change="onFileChange" multiple />
                 <label f or="file"><v-icon class="v-icon greylighten-3--text mr-2 caption IconHover">fas fa-chevron-right</v-icon>Choose a file</label>
               </div>
-              <div v-else>
+              <div >
-                <img :src="image" style="width:100%;"/>
+                <div v-for="(img, key) in images" :key="key">
-                <button @click="removeImage">Remove image</button>
+                  <img :src="img" style="width:100%;"/>
+                  <button @click="removeImage(key)">Remove image</button>
+                </div>
               </div>
           </v-flex>
           <v-flex :class="['pa-2', item.size]" v-for="(item, key) in form" :key="key">
@@ -222,7 +224,7 @@ export default {
       img: null,
       test_type_id: "",
     },
-    image: null,
+    images: [],
   }),
   created() {
     if (this.$route.params.testResult) {
@@ -285,26 +287,31 @@ export default {
       var files = e.target.files || e.dataTransfer.files;
       if (!files.length)
         return;
-      this.createImage(files[0]);
+      for (const key in files) {
+        if (files.hasOwnProperty(key)) {
+          this.createImage(files[key], key);
+        }
+      }
+      
     },
-    createImage(file) {
+    createImage(file, index) {
       var image = new Image();
       var reader = new FileReader();
       var vm = this;
 
       reader.onload = (e) => {
-        vm.image = e.target.result;
+        vm.images.push(e.target.result);
       };
 
       reader.readAsDataURL(file);
     },
-    removeImage: function (e) {
+    removeImage (index) {
-      this.image = null;
+      this.images.splice(index, 1);
     },
   },
   watch:{
-    image(img) {
+    images(img) {
-      this.formData.img = img;
+      this.formData.imgs = img;
     }
   }
 };