diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 6a2d6e63..5722f34c 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -576,7 +576,7 @@ class BookingController extends Controller
return response()->json(['book_id'=>$book_id],200);
}
- public function uploadbankslip(Request $request, $id)
+ private function uploadbankslip(Request $request, $id)
{
$booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
@@ -586,40 +586,48 @@ 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(), [
+ // 'slip_image' => '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' // image size
- ]);
+ // $validator = Validator::make($request->all(), [
+ // 'slip_image' => 'max:10000' // image size
+ // ]);
- if($validator->fails())
- {
- return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
- }
+ // if($validator->fails())
+ // {
+ // return response()->json(['message'=>'Image too large, upload files up to 3 MB'], 400);
+ // }
- if($bankslip_file = $request->file('file'))
+ if($bankslip_file = $request->input('slip_image'))
{
- /* End Validation */
- $filename = $bankslip_file->getClientOriginalName();
- $ext = $bankslip_file->getClientOriginalExtension();
-
-
- $unique_name = 'bank_slip_' . md5($filename. time()); // probably not a good idea
- $unique_image_path = $unique_name. '.' .$ext;
-
- $upload_path = Storage::disk('public')->putFileAs(
- 'user_bankslip', $bankslip_file, $unique_image_path
- );
+ $ext = explode('/', explode(':', substr($bankslip_file, 0, strpos($bankslip_file, ';')))[1])[1];
+ $img = str_replace('data:image/'.$ext.';base64,', '', $bankslip_file);
+ $img = str_replace(' ', '+', $img);
+ $data = base64_decode($img);
+ $file_name = 'bank_slip_' . md5(time()).'.'.$ext;
+ if($bankslip_file!=""){
+ // 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();
@@ -628,8 +636,8 @@ class BookingController extends Controller
$user_bankslip = new UserBankSlip;
}
$user_bankslip->booking_id = $booking->id;
- $user_bankslip->bankslip_path = $upload_path;
- $user_bankslip->transfer_amount = $request->input('transfer_amount');
+ $user_bankslip->bankslip_path = 'user_bankslip'.'/'.$file_name;
+ $user_bankslip->transfer_amount = null;
$user_bankslip->save();
@@ -647,6 +655,7 @@ class BookingController extends Controller
}
public function updateBankSlipAmount(Request $request, $id){
+ $this->uploadbankslip($request, $id);
$booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
$user_bankslip = $booking->userBankSlip()->first();
diff --git a/package.json b/package.json
index 1836605b..51237498 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
"bootstrap": "^4.0.0",
"canvas2image": "^1.0.5",
"element-ui": "^2.4.4",
+ "image-compressor.js": "^1.1.4",
"jquery": "^3.3.1",
"js-cookie": "^2.2.0",
"laravel-echo": "^1.4.0",
@@ -34,6 +35,7 @@
"vue-axios": "^2.1.1",
"vue-button-spinner": "^2.2.0",
"vue-i18n": "^7.6.0",
+ "vue-image-compressor": "^1.0.3",
"vue-js-toggle-button": "^1.3.0",
"vue-loader": "^14.2.2",
"vue-loading-spinner": "^1.0.11",
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index 0c12a311..d1bb5a7b 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -58,11 +58,27 @@
![]()
-->
-
+
![]()
+
@@ -155,6 +171,7 @@
import ProgressTrack from '~/components/ProgressTrack'
import X2ProgressTrack from '~/components/X2ProgressTrack'
import axios from 'axios'
+ import ImageCompressor from 'image-compressor.js';
export default {
middleware: ['auth'],
@@ -177,7 +194,8 @@
dialogVisible: false,
booking_id: this.$route.params.id,
user_slip_form: {
- transfer_amount: ''
+ transfer_amount: '',
+ slip_image: ''
},
booking: {
amount: '',
@@ -292,14 +310,23 @@
beforeFileUpload(file) {
//const isJPG = file.type === 'image/jpeg';
- const isLt10M = file.size / 10240 / 10240 < 2;
-
- // if (!isJPG) {
- // this.$message.error('Avatar picture must be JPG format!');
- // }
- if (!isLt10M) {
- this.$message.error('File size can not exceed 10MB!');
- }
+ const isLt2M = file.size / 1024 / 1024 < 2;
+ var vm = this;
+ new ImageCompressor(file.raw, {
+ quality: .4,
+ convertSize: 1500000,
+ success(result) {
+ var reader = new FileReader();
+ reader.readAsDataURL(result);
+ reader.onloadend = function() {
+ vm.imageUrl = reader.result;
+ vm.user_slip_form.slip_image = reader.result;
+ }
+ },
+ error(e) {
+ console.log(e.message);
+ }
+ });
this.$message({
showClose: true,
@@ -308,7 +335,7 @@
duration: 5000
})
// return isJPG && isLt2M;
- return isLt10M;
+ return isLt2M;
},
handleCoutdownend() {
@@ -357,7 +384,7 @@
let newUserSlip = {
transfer_amount: this.user_slip_form.transfer_amount
}
- axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount/', newUserSlip)
+ axios.patch('/api/booking/' + this.booking_id + '/bankslip-amount/', this.user_slip_form)
.then((response) => {
console.log(response);