Laravel app এ Vue.js দিয়ে image upload করতে গেলে আমি সব সময়ই ভুলে যাই কোন কাজটার পর কোনটা করবো বা কিভাবে করবো। দিন দিন technology এত পরিমাণ update হচ্ছে যে সব কিছু মনে রাখাও সম্ভব না। তাই আজ এই article টি লিখতে বসলাম।

Create HTML Form

Image upload করার জন্য নিচের ফর্মটিই যথেষ্ট। তবে প্রয়োজন অনুযায়ী field বাড়তে পারে।

<template>
	<div>
		<div class="form-group">
			<label>Upload image</label>
			<input type="file" @change="imageSelected">
		</div>
		<input type="submit" value="Publish" class="btn btn-primary" @click="submit">
	<div>
</template>

 

JavaScript

Image upload করার জন্য ঝামেলা পূর্ণ কাজটা হল এখানে, আমাদের একটি FormData object তৈরি করে সেটাতে append করতে হয়। Vue component এর সম্পূর্ণ কোডটি দেখতে নিচের মত হবে।

<script>
	export default {
		data(){
			return {
				'image': ''
			}
		},
		
		methods: {
			imageSelected(event){
				var files = event.target.files;
				if(files.length){
					this.image = files[0];
				}
			},

			submit(){
				axios.post('/images/store', this.makeFormData)
					.then(this.submitResponse);
			},

			submitResponse(res){
				console.log(res);
			}
		},
		
		computed: {
			makeFormData(){
				var formData = new FormData();
				formData.append('image_file', this.image);
				return formData;
			}
		}
	};
</script>

যারা Vue.js জানেন উনারা code দেখলেই বুঝতে পারবেন, এখানে explain করার কিছু নাই।

 

Laravel Controller

Controller method সাধারণ HTML form ক্ষেত্রে যা থাকে এখানেও তাই থাকবে, তবুও লিখে রাখি মাঝে মাঝে copy করা যাবে।

public function store(Request $request)
{
	if($request->hasFile('image')){
		$path = Storage::disk('public')->putFile('images', $request->file('image_file'));
		return response()->json([
			'path' => $path,
			'message' => 'Image uploaded successfully.'
		], 201);
	}else{
		return response()->json([
			'path' => null,
			'message' => 'Please upload an image.'
		], 422);
	}
}

এখানে শুধু image folder এ store করা পর্যন্ত দেখানো হয়েছে। আপনারা চাইলে image এর path টি database এ রাখতে পারেন।

কোন ভুল হয়ে থাকলে অবশ্যই ধরিয়ে দিবেন এবং লিখাটি অপ্রয়োজনীয় মনে হলে আবশ্যই comment করবেন।