diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 5722f34c..6eae55e3 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -617,17 +617,7 @@ class BookingController extends Controller
                 // storing image in storage/app/public Folder
                 $upload_path = \Storage::disk('public')->put('user_bankslip'.'/'.$file_name, $data);     
             }
-            // /* End Validation */
-            // // $filename = $bankslip_file->getClientOriginalName();
-            // 
-
-            // $unique_name = 'bank_slip_' . md5(time()); // probably not a good idea 
-            // $unique_image_path = $unique_name. '.' .'jpg';
-            // $image_parts = explode(";base64,", $bankslip_file);
-            // $upload_path = \Storage::disk('public')->put('user_bankslip'.'/'.$unique_image_path,base64_decode(base64_decode($image_parts[1])));
-            // // $upload_path = Storage::disk('public')->putFileAs(
-            // //     'user_bankslip', base64_decode($image), $unique_image_path
-            // // ); 
+            
             if($upload_path){
                 $user_bankslip = $booking->userBankSlip()->first();
             
@@ -688,23 +678,23 @@ class BookingController extends Controller
                 return response()->json(['message'=>'Access denied'], 403);
             }
 
-            $validator = Validator::make($request->all(), [
-                'file'   => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf'
-            ]);
+            // $validator = Validator::make($request->all(), [
+            //     'file'   => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf'
+            // ]);
 
-            if($validator->fails())
-            {
-                return response()->json(['message'=>'Incorrect format'],400);
-            }
+            // if($validator->fails())
+            // {
+            //     return response()->json(['message'=>'Incorrect format'],400);
+            // }
 
-            $validator = Validator::make($request->all(), [
-                'file'   => 'max:10000'
-            ]);
+            // $validator = Validator::make($request->all(), [
+            //     'file'   => 'max:10000'
+            // ]);
 
-            if($validator->fails())
-            {
-                return response()->json(['message'=>'File too large, upload files up to 3 MB'], 400);
-            }
+            // if($validator->fails())
+            // {
+            //     return response()->json(['message'=>'File too large, upload files up to 3 MB'], 400);
+            // }
 
             if(!$user_input_file = $request->file('file'))
             {
@@ -1011,7 +1001,8 @@ class BookingController extends Controller
         }
     }
     
-    public function confirmPurchaseOrder($id){
+    public function confirmPurchaseOrder($id, Request $request){
+        dd($request->input('images')[0]);
         $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
 
         $purchase_order = $booking->purchaseOrder()->first();
diff --git a/resources/assets/js/pages/auth/register.vue b/resources/assets/js/pages/auth/register.vue
index c6609c44..a29bae4b 100644
--- a/resources/assets/js/pages/auth/register.vue
+++ b/resources/assets/js/pages/auth/register.vue
@@ -10,6 +10,9 @@
 							<div class="col-md-7">
 								<input v-model="form.marking" :class="{ 'is-invalid': form.errors.has('marking') }" class="form-control" type="text" name="marking">
 								<has-error :form="form" field="marking"/>
+								<ul class="text-danger list-unstyled" :class="[{hide: !errors.marking}]">
+									<li v-for="(error, index) in errors.marking" v-bind:key="index">{{error}}</li>
+								</ul>
 							</div>
 						</div>
 
@@ -20,6 +23,9 @@
 								<el-input v-model="form.email" type="email" name="email" placeholder="Email">
 								</el-input>
 								<has-error :form="form" field="email"/>
+								<ul class="text-danger list-unstyled" :class="[{hide: !errors.email}]">
+									<li v-for="(error, index) in errors.email" v-bind:key="index">{{error}}</li>
+								</ul>
 							</div>
 						</div>
 
@@ -38,6 +44,9 @@
 									</template>
 								</el-input>
 								<has-error :form="form" field="password"/>
+								<ul class="text-danger list-unstyled" :class="[{hide: !errors.password}]">
+									<li v-for="(error, index) in errors.password" v-bind:key="index">{{error}}</li>
+								</ul>
 							</div>
 						</div>
 
@@ -101,6 +110,11 @@ export default {
 			password: '',
 			password_confirmation: ''
 		}),
+		errors: {
+			marking: '',
+			email: '',
+			password: ''
+		},
 		email : '',
 		password_visible : false,
 		password_confirmation_visible : false
@@ -121,13 +135,11 @@ export default {
 				})
 			})
 			.catch( (error) => {
-				console.log(error)
-			    this.$message({
-				message: error.response.data.message,
-				type: 'error'
-				})
-			}
-			)
+				this.errors['marking'] = error.response.data.errors.marking;
+				this.errors['email'] = error.response.data.errors.email;
+				this.errors['password'] = error.response.data.errors.password;
+			    
+			})
 
 			
 			await this.form.post('/api/login')
@@ -136,11 +148,7 @@ export default {
 				token = response.data.token
 			})
 			.catch( (error) => {
-				console.log(error)
-			    this.$message({
-				message: error.response.data.message,
-				type: 'error'
-				})
+			
 			}
 			)
 
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index b703cd8e..aea236e2 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -14,7 +14,7 @@
           <!-- upload image -->
           <div class="card-body">
 
-            <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove"
+            <el-upload :action="'/api/booking/' + booking_id + '/upload-po'" :auto-upload="false" :on-change="beforeFileUpload" :on-exceed="handleExceed" :on-preview="handlePreview" :on-remove="handleRemove"
               :on-error="uploadError" class="upload-demo  uploadAreaOne" accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
               drag multiple>
               <i class="el-icon-upload" />
@@ -187,6 +187,7 @@
  import ProgressTrack from '~/components/ProgressTrack'
 import X2ProgressTrack from '~/components/X2ProgressTrack'
 import axios from 'axios'
+import ImageCompressor from 'image-compressor.js'
 
 export default {
   components: {
@@ -200,6 +201,7 @@ export default {
             status: 5,
             term: null
         },
+        purchaseOrderArray: [],
         loading_btn: false,
         booking_details: {
           id: null,
@@ -236,28 +238,62 @@ export default {
     methods: {
       uploadPo() {
         this.loading_btn = true
+        console.log(this.purchaseOrderArray);
         axios
-          .post('/api/booking/' + this.$route.params.id + '/confirm-po')
-          .then((response) => {
-            this.$message({
-              showClose: true,
-              message: 'Your PO has been uploaded. We are processing the Invoice.',
-              type: 'success',
-              duration: 5000
-            })
-            this.$router.push({
-              name: 'home'
-            })
-            this.loading_btn = false
-          }).catch((error) => {
-            this.$message({
-              showClose: true,
-              message: "Please upload your purchase order",
-              type: 'error',
-              duration: 30000
-            })
-            this.loading_btn = false
-          })
+          .post('/api/booking/' + this.$route.params.id + '/confirm-po', { images: this.purchaseOrderArray})
+          // .then((response) => {
+          //   this.$message({
+          //     showClose: true,
+          //     message: 'Your PO has been uploaded. We are processing the Invoice.',
+          //     type: 'success',
+          //     duration: 5000
+          //   })
+          //   this.$router.push({
+          //     name: 'home'
+          //   })
+          //   this.loading_btn = false
+          // }).catch((error) => {
+          //   this.$message({
+          //     showClose: true,
+          //     message: "Please upload your purchase order",
+          //     type: 'error',
+          //     duration: 30000
+          //   })
+          //   this.loading_btn = false
+          // })
+      },
+      beforeFileUpload(file, fileList) {
+        this.purchaseOrderArray = [];
+        var vm = this;
+        for (var i in fileList) {
+          var filetype = fileList[i].raw.type.split("/")[0];
+          if(filetype === 'image'){
+            new ImageCompressor(fileList[i].raw, {
+              quality: .4,
+              convertSize: 1500000,
+              success(result) {
+                vm.convertFile(result)
+              },
+              error(e) {
+                console.log(e.message);
+              }
+            });
+          } else {
+            this.convertFile(fileList[i].raw)
+          }
+          
+        }
+
+        
+      },
+      convertFile(file){
+        var vm = this,
+            reader = new FileReader();
+        reader.readAsDataURL(file); 
+        reader.onloadend = function() {
+          vm.purchaseOrderArray.push(reader.result);
+          console.log(vm.purchaseOrderArray);
+        }
       },
       handleRemove(file, fileList) {
         console.log(file, fileList)