From 16205404e1212a380efe27a7ce708f2deb561891 Mon Sep 17 00:00:00 2001
From: weiweitoo <sengweitoo@gmail.com>
Date: Thu, 19 Jul 2018 17:45:25 +0800
Subject: [PATCH] Fix upload issue. allow po to upload multiple and display
 multiple. Display download link when the uploaded file is not image

---
 app/Booking.php                               |  2 +-
 app/Http/Controllers/BookingController.php    | 27 ++++++++------
 .../Controllers/ChinaBankSlipController.php   | 17 ++++-----
 .../js/pages/admin/booking/completed.vue      | 21 +++++------
 .../js/pages/admin/booking/supplierReport.vue | 20 +++++++++-
 .../admin/booking/uploadChinaBankslip.vue     | 12 ++++--
 .../js/pages/admin/booking/uploadInvoice.vue  | 22 +++++++++--
 .../js/pages/admin/booking/verification.vue   | 28 ++++++++++----
 .../assets/js/pages/booking/completed.vue     | 17 +++++----
 .../assets/js/pages/booking/confirmation.vue  | 21 ++++++++++-
 resources/assets/js/pages/booking/po.vue      | 37 ++++++++++++++-----
 .../assets/js/pages/booking/transfer.vue      | 21 ++++++++++-
 .../assets/js/pages/booking/uploadPo.vue      | 29 ++++++++++++---
 .../js/pages/booking/uploadUserBankSlip.vue   | 21 +++++++----
 14 files changed, 212 insertions(+), 83 deletions(-)

diff --git a/app/Booking.php b/app/Booking.php
index 5a1c2e0e..24990028 100644
--- a/app/Booking.php
+++ b/app/Booking.php
@@ -38,7 +38,7 @@ class Booking extends Model
     }
 
     public function chinaBankSlip(){
-        return $this->hasOne(ChinaBankSlip::class);
+        return $this->hasMany(ChinaBankSlip::class);
     }
     
     public function userBankSlip(){
diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index b675e7b5..cce0fcb8 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -149,7 +149,7 @@ class BookingController extends Controller
         $booking = Booking::where('user_id',Auth::user()->id)->where('id', $id)->first();
        
         $user_bankslip = $booking->userBankSlip()->first();
-        $china_bankslip = $booking->chinaBankSlip()->first();
+        $china_bankslip = $booking->chinaBankSlip()->get();
         $po = $booking->purchaseOrder()->first();
         $invoice = $booking->invoice()->first();
 
@@ -164,7 +164,10 @@ class BookingController extends Controller
             }
 
             if($china_bankslip){
-                $booking->china_bankslip_path = Storage::url($china_bankslip->china_bank_slip_path);
+                for($index = 0;$index < $booking->chinaBankSlip()->count();$index++){
+                    $china_bankslip[$index] = Storage::url($china_bankslip[$index]->china_bank_slip_path);
+                }
+                $booking->china_bankslip_path = $china_bankslip;
             }
 
             if($po){
@@ -197,12 +200,11 @@ class BookingController extends Controller
 
         
         $user_bankslip = $booking->userBankSlip()->first();
-        $china_bankslip = $booking->chinaBankSlip()->first();
+        $china_bankslip = $booking->chinaBankSlip()->get();
         $po = $booking->purchaseOrder()->first();
         $invoice = $booking->invoice()->first();
 
 		if($booking){
-
             if ($user_bankslip){
                 $booking->user_bankslip_path = Storage::url($user_bankslip->bankslip_path);
                 $booking->reject_reason = $user_bankslip->reject_reason;
@@ -210,7 +212,10 @@ class BookingController extends Controller
             }
 
             if($china_bankslip){
-                $booking->china_bankslip_path = Storage::url($china_bankslip->china_bank_slip_path);
+                for($index = 0;$index < $booking->chinaBankSlip()->count();$index++){
+                    $china_bankslip[$index] = Storage::url($china_bankslip[$index]->china_bank_slip_path);
+                }
+                $booking->china_bankslip_path = $china_bankslip;
             }
 
             if($po){
@@ -372,16 +377,16 @@ class BookingController extends Controller
         /* Validation*/
         if (!$booking)
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Access denied'], 403);
         }
 
         $validator = Validator::make($request->all(), [
-            'file'   => 'image|mimes:jpg,jpeg,bmp,png'
+            'file'   => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf'
         ]);
 
         if($validator->fails())
         {
-            return response()->json(['message'=>'Incorrect format'],200);
+            return response()->json(['message'=>'Incorrect format'],400);
         }
 
         $validator = Validator::make($request->all(), [
@@ -524,7 +529,7 @@ class BookingController extends Controller
     {
         if (!$booking = Booking::where('user_id',Auth::user()->id)->where('id',$book_id)->first())
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Access denied'],403);
         }
 
         $booking->is_cancel = true;
@@ -646,12 +651,12 @@ class BookingController extends Controller
         $booking = Booking::where('id',$book_id)->first();
         if (!$booking)
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Access denied'], 403);
         }
 
         if(!$userBankSlip = UserBankSlip::where('booking_id',$booking->id)->first())
         {
-            return response()->json(['message'=>'Access denied'], 200);
+            return response()->json(['message'=>'Access denied'], 403);
         }
 
         // approved bankslip cannot be reject again
diff --git a/app/Http/Controllers/ChinaBankSlipController.php b/app/Http/Controllers/ChinaBankSlipController.php
index f0b8c291..eabfe4a5 100644
--- a/app/Http/Controllers/ChinaBankSlipController.php
+++ b/app/Http/Controllers/ChinaBankSlipController.php
@@ -15,30 +15,29 @@ class ChinaBankSlipController extends Controller
     {      
         $booking = Booking::where('id',$id)->firstOrFail();
         
+        if (!$booking) {
+            return response()->json(['message'=>'Access denied'], 403);
+        }
+
         // TODO : put this after check file exist 
         // validate file format 
         $validator = Validator::make($request->all(), [
-            'file'   => 'image|mimes:jpg,jpeg,bmp,png'
+            'file'   => 'mimes:jpg,jpeg,bmp,png,xls,xlsx,doc,docx,pdf'
         ]);
 
-        if($validator->fails())
-        {
-            return response()->json(['message'=>'Incorrect format'],200);
+        if($validator->fails()){
+            return response()->json(['message'=>'Incorrect format'],400);
         }
 
-
         $validator = Validator::make($request->all(), [
             'china_bank_slips'   => 'max:3072'
         ]);
         
-        if($validator->fails())
-        {
+        if($validator->fails()){
             return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
         }
 
-
         if($bankslip_file = $request->file('file')){
-         
             $filename = $bankslip_file->getClientOriginalName();
             $ext = $bankslip_file->getClientOriginalExtension();
             $unique_name = 'cnbank_slip_' . md5($filename. time()); // probably not a good idea 
diff --git a/resources/assets/js/pages/admin/booking/completed.vue b/resources/assets/js/pages/admin/booking/completed.vue
index 2d07d257..ac9b8137 100644
--- a/resources/assets/js/pages/admin/booking/completed.vue
+++ b/resources/assets/js/pages/admin/booking/completed.vue
@@ -19,7 +19,7 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
+            <el-col :span="12" align="center">
               <a target="_blank" :href="getURL(booking_details.user_po_path)">
                 <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
@@ -36,11 +36,14 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
-                <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
-                <p v-else>Download</p>
-              </a>
+            <el-col :span="12" align="center">
+              <div v-for="cn_bankslip in booking_details.china_bankslip_path">
+                <a target="_blank" :href="getURL(cn_bankslip)">
+                  <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
+                  <p v-else>Download</p>
+                  <br/>
+                </a>
+              </div>
             </el-col>
           </el-row>
         </el-card>
@@ -52,7 +55,7 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
+            <el-col :span="12" align="center">
               <a target="_blank" :href="getURL(booking_details.invoice_path)">
                 <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
                 <p v-else>Download</p>
@@ -330,7 +333,6 @@ export default {
       .then((response) => {
         this.booking_details = response.data
         this.trackerConfig.term = response.data.term;
-        console.log(this.booking_details);
         loading.close()
       }).catch((error) => {
         console.log(error)
@@ -350,9 +352,6 @@ export default {
     },
     getURL(path){
       var getUrl = window.location;
-      console.log(getUrl.protocol);
-      console.log(getUrl.host);
-      console.log(getUrl.pathname.split('/')[1]);
       var baseUrl = getUrl.protocol + "//" + getUrl.host;
       return baseUrl + path;
     }
diff --git a/resources/assets/js/pages/admin/booking/supplierReport.vue b/resources/assets/js/pages/admin/booking/supplierReport.vue
index 6cff23ee..93dbbd02 100644
--- a/resources/assets/js/pages/admin/booking/supplierReport.vue
+++ b/resources/assets/js/pages/admin/booking/supplierReport.vue
@@ -215,8 +215,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="booking_details.user_bankslip_path">
-              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
             </a>
           </el-col>
         </el-row>
@@ -400,6 +401,21 @@
           }
         })
       },
+      getExtension(path){
+        return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        console.log(getUrl.protocol);
+        console.log(getUrl.host);
+        console.log(getUrl.pathname.split('/')[1]);
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
     },
     directives: {
       insertMessage: function (canvasElement, binding) {
diff --git a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
index 158489c3..9d9410f5 100644
--- a/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
+++ b/resources/assets/js/pages/admin/booking/uploadChinaBankslip.vue
@@ -205,11 +205,13 @@
               <div align="center">
 
                 <!-- upload image -->
-                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" :on-preview="handlePreview"
+                <el-upload class="upload-demo" :action="'/api/booking/' + booking_id + '/upload-china-bankslip'" 
+                :on-preview="handlePreview"
+                :on-error="uploadError"
                   accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
                   :on-remove="handleRemove" :multiple="false" list-type="picture">
                   <el-button size="small" type="primary">Click to upload</el-button>
-                  <div slot="tip" class="el-upload__tip">jpg/png files with a size less than 3 MB</div>
+                  <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
                 </el-upload>
 
                 <br>
@@ -352,11 +354,10 @@
               .then((response) => {
                 this.$message({
                   showClose: true,
-                  message: 'Your bankinslip has been submitted, please wait customer to upload their purchase order.',
+                  message: 'Your bankinslip has been submitted, please wait customer to upload their purchase order',
                   type: 'success',
                   duration: 5000
                 })
-
                 console.log(response)
                 this.$router.push({
                   name: 'home'
@@ -388,6 +389,9 @@
       },
       handlePreview(file) {
         console.log(file);
+      },
+      uploadError(file,fileList){
+        this.$message.warning(`Incorrect file format or file size too big.`)
       }
     }
   }
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index c48aa193..74a7e39f 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -220,9 +220,10 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target="_blank" :href="booking_details.user_po_path">
-                <img v-bind:src="booking_details.user_po_path" class="image">
+            <el-col :span="12" align="center">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -381,6 +382,21 @@
       },
       uploadError(file,fileList){
         this.$message.warning(`Incorrect file format or file size too big.`)
+      },
+      getExtension(path){
+       return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        console.log(getUrl.protocol);
+        console.log(getUrl.host);
+        console.log(getUrl.pathname.split('/')[1]);
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
       }
     }
   }
diff --git a/resources/assets/js/pages/admin/booking/verification.vue b/resources/assets/js/pages/admin/booking/verification.vue
index 72d8f121..50405fae 100644
--- a/resources/assets/js/pages/admin/booking/verification.vue
+++ b/resources/assets/js/pages/admin/booking/verification.vue
@@ -201,13 +201,12 @@
           <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
         </div>
         <el-row :gutter="12">
-          <a target="_blank" :href="booking_details.user_bankslip_path">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </a>
-          <!--<el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
-          </el-col>-->
-
+          <el-col :span="22" style="text-align:center">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
+          </el-col>
         </el-row>
       </el-card>
 
@@ -365,6 +364,21 @@
             console.log(error)
           })
       },
+      getExtension(path){
+        return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        console.log(getUrl.protocol);
+        console.log(getUrl.host);
+        console.log(getUrl.pathname.split('/')[1]);
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
     }
   }
 </script>
\ No newline at end of file
diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 82439aff..6fc6231b 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -19,7 +19,7 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
+            <el-col :span="12" align="center">
               <a target="_blank" :href="getURL(booking_details.user_po_path)">
                 <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
                 <p v-else>Download</p>
@@ -36,11 +36,14 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
-                <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
-                <p v-else>Download</p>
-              </a>
+            <el-col :span="12" align="center">
+              <div v-for="cn_bankslip in booking_details.china_bankslip_path">
+                <a target="_blank" :href="getURL(cn_bankslip)">
+                  <img v-if="isImage(cn_bankslip)" v-bind:src="cn_bankslip" class="image">
+                  <p v-else>Download</p>
+                  <br/>
+                </a>
+              </div>
             </el-col>
           </el-row>
         </el-card>
@@ -52,7 +55,7 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">     
+            <el-col :span="12" align="center">     
                 <a target="_blank" :href="getURL(booking_details.invoice_path)">
                   <img v-if="isImage(booking_details.invoice_path)" v-bind:src="booking_details.invoice_path" class="image">
                   <p v-else>Download</p>
diff --git a/resources/assets/js/pages/booking/confirmation.vue b/resources/assets/js/pages/booking/confirmation.vue
index d1de4156..c185d03e 100644
--- a/resources/assets/js/pages/booking/confirmation.vue
+++ b/resources/assets/js/pages/booking/confirmation.vue
@@ -210,7 +210,10 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+            <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+            <p v-else>Download</p>
+          </a>
           </el-col>
         </el-row>
       </el-card>
@@ -266,7 +269,21 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+        return path.slice(-3);
+      },
+      isImage(path){
+        var ext = this.getExtension(path);
+        return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+      },
+      getURL(path){
+        var getUrl = window.location;
+        console.log(getUrl.protocol);
+        console.log(getUrl.host);
+        console.log(getUrl.pathname.split('/')[1]);
+        var baseUrl = getUrl.protocol + "//" + getUrl.host;
+        return baseUrl + path;
+      }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/po.vue b/resources/assets/js/pages/booking/po.vue
index f7ba1050..aeffc24d 100644
--- a/resources/assets/js/pages/booking/po.vue
+++ b/resources/assets/js/pages/booking/po.vue
@@ -19,9 +19,10 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target=" _blank" :href="booking_details.user_po_path">
-                <img v-bind:src="booking_details.user_po_path" class="image">
+            <el-col :span="12" align="center">
+              <a target="_blank" :href="getURL(booking_details.user_po_path)">
+                <img v-if="isImage(booking_details.user_po_path)" v-bind:src="booking_details.user_po_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -35,9 +36,10 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target=" _blank" :href="booking_details.china_bankslip_path">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+            <el-col :span="12" align="center">
+              <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
+                <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -50,7 +52,7 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">     
+            <el-col :span="12" align="center">     
                 <img width="100%" height="100%" src="http://via.placeholder.com/900x1615">   
             </el-col>
           </el-row>
@@ -262,8 +264,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="booking_details.user_bankslip_path">
-              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
             </a>
           </el-col>
         </el-row>
@@ -331,7 +334,21 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      console.log(getUrl.protocol);
+      console.log(getUrl.host);
+      console.log(getUrl.pathname.split('/')[1]);
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/transfer.vue b/resources/assets/js/pages/booking/transfer.vue
index 94fce616..5fc95c2c 100644
--- a/resources/assets/js/pages/booking/transfer.vue
+++ b/resources/assets/js/pages/booking/transfer.vue
@@ -210,7 +210,10 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <img v-bind:src="booking_details.user_bankslip_path" class="image">
+            <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
+            </a>
           </el-col>
         </el-row>
       </el-card>
@@ -266,7 +269,21 @@ export default {
       })
   },
   methods: {
-
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      console.log(getUrl.protocol);
+      console.log(getUrl.host);
+      console.log(getUrl.pathname.split('/')[1]);
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
+    }
   }
 }
 </script>
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index c786eaa7..60ca3ab4 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -30,7 +30,7 @@
             <div class="el-upload__text">Drop file here or
               <em>click to upload</em>
             </div>
-            <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3mb</div>
+            <div slot="tip" class="el-upload__tip">bmp/jpeg/jpg/png/pdf/xls/xlxs/doc/docx files with a size less than 3MB</div>
           </el-upload>
 
           <br>
@@ -49,9 +49,10 @@
             <!-- <el-button style="float: right; padding: 3px 0" type="text">Operation button</el-button> -->
           </div>
           <el-row :gutter="12" type="flex">
-            <el-col :span="12">
-              <a target="_blank" :href="booking_details.china_bankslip_path">
-                <img v-bind:src="booking_details.china_bankslip_path" class="image">
+            <el-col :span="12" align="center">
+               <a target="_blank" :href="getURL(booking_details.china_bankslip_path)">
+                <img v-if="isImage(booking_details.china_bankslip_path)" v-bind:src="booking_details.china_bankslip_path" class="image">
+                <p v-else>Download</p>
               </a>
             </el-col>
           </el-row>
@@ -233,8 +234,9 @@
         </div>
         <el-row :gutter="12">
           <el-col :span="22" style="text-align:center">
-            <a target="_blank" :href="booking_details.user_bankslip_path">
-              <img v-bind:src="booking_details.user_bankslip_path" class="image">
+             <a target="_blank" :href="getURL(booking_details.user_bankslip_path)">
+              <img v-if="isImage(booking_details.user_bankslip_path)" v-bind:src="booking_details.user_bankslip_path" class="image">
+              <p v-else>Download</p>
             </a>
           </el-col>
         </el-row>
@@ -344,6 +346,21 @@ export default {
     },
     uploadError(file,fileList){
       this.$message.warning(`Incorrect file format or file size too big.`)
+    },
+    getExtension(path){
+      return path.slice(-3);
+    },
+    isImage(path){
+      var ext = this.getExtension(path);
+      return ext === 'jpg' || ext === 'jpeg' || ext === 'bmp' || ext === 'png';
+    },
+    getURL(path){
+      var getUrl = window.location;
+      console.log(getUrl.protocol);
+      console.log(getUrl.host);
+      console.log(getUrl.pathname.split('/')[1]);
+      var baseUrl = getUrl.protocol + "//" + getUrl.host;
+      return baseUrl + path;
     }
   }
 }
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index b8abc5f2..02bc2223 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -56,9 +56,12 @@
 	<br>
 
 	<!-- upload image -->
-	<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" :on-preview="handlePictureCardPreview" :on-remove="handleRemove"
-	accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
-				 list-type="picture-card" align="center">
+	<el-upload :action="'/api/booking/' + booking_id + '/upload-user-bankslip'" 
+		:on-preview="handlePictureCardPreview" 
+		:on-remove="handleRemove"
+		:on-error="uploadError"
+		accept=".jpeg, .jpg, .png, .bmp, .doc, .docx, .xls, .xlsx, .pdf"
+		list-type="picture-card" align="center">
 		<i class="el-icon-plus" />
 	</el-upload>
 	<el-dialog :visible.sync="dialogVisible">
@@ -97,7 +100,7 @@
 </template>
 <style>
 	.booking-details {
-	font-weight: bold;
+		font-weight: bold;
 	}
 </style>
 <script>
@@ -109,8 +112,8 @@ export default {
 	middleware: ['auth'],
 	name: 'MyComponent',
 	components: {
-	'vue-countdown': VueCountdown,
-	'progress-track': ProgressTrack
+		'vue-countdown': VueCountdown,
+		'progress-track': ProgressTrack
 	},
 	data () {
 		return {
@@ -168,7 +171,7 @@ export default {
 			this.booking.reject_reason = response.data.reject_reason
 		}
 
-		this.start = true
+		this.start = true;
 
 		if (this.booking.timeout < 0){
 			this.$message({
@@ -191,7 +194,6 @@ export default {
 		axios.get('/api/active-bank')
 			.then((response) => {
 				this.active_bank_setting = response.data;
-				console.log(this.active_bank_setting.x1_bank_id);
 				var url = '';
 				if(this.booking.term === 'x1_cash' || this.booking.term === 'x1_cheque' ||this.booking.term === 'x1_ba'){
 					url = '/api/malaysia-bank/' + this.active_bank_setting.x1_bank_id;
@@ -241,6 +243,9 @@ export default {
 		handleRemove (file, fileList) {
 			// console.log(file, fileList)
 		},
+		uploadError(file,fileList){
+			this.$message.warning(`Incorrect file format or file size too big.`)
+		},
 		handlePictureCardPreview (file) {
 			this.dialogImageUrl = file.url
 			this.dialogVisible = true