লারাভেল Ajax ইমেজ আপলোড টিউটোরিয়াল

অ্যাপ্লিকেশনের ভাল UX এর জন্য Ajax image upload একটি গুরুত্বপূর্ণ বিষয়। আজকের এই পোষ্টে আমি আপনাদের ধাপে ধাপে শেখাব কিভাবে লারাভেল ফ্রেমওয়ার্ক দিয়ে Ajax image upload করতে হয়। এই টিউটোরিয়ালটি অনুস্মরন করে আপনি লারাভেল ভার্সন ৫.০ থেকে ৫.৮ পর্যন্ত যেকোন ভার্সনে কাজ করতে পারবেন।

১ মে দু'টি রাউট তৈরী করি।

Route::get('admin/profile', 'UserController@getProfile');
Route::post('admin/profile', 'UserController@postProfileUpdate');

GET রাউটটি দিয়ে আমরা একটি ভিউ রিটার্ণ করাবো যেখানে ইউজারের তথ্য থাকবে এবং সাথে একটি ফাইল ইনপুট থাকবে যেখান থেকে ইউজার তার প্রফাইল ফটো আপডেট করতে পারবে আর এই প্রফাইল ছবিটি আমরা Ajax এর মাধ্যমে করব।

এখন আমাদের রাউটগুলোকে হ্যান্ডেল করার জন্য আমরা কন্ট্রোলারে কোড করি।

<?php
namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;


class UserController extends Controller
{
    public function getProfile()
    {
        $user = User::find(1);
        return view('profile', compact('user'));
    }

    public function postProfileUpdate(Request $request)
    {
        $user = User::find($request->input('id'));

        // user photo upload
        if ($request->hasFile('photo')) {
            $photo = $request->file('photo');

            $fileName = $user->id . "." . $photo->getClientOriginalExtension();
            $request->file('photo')->move(public_path('user-photos'), $fileName);
            $user->update(['photo' => $fileName]);
        }
        //end user photo upload
        return ['success'=>true,'message'=>'Successfully updated'];
    }
}

আমাদের কন্ট্রোলারে কোড করা শেষ। এখন আমরা একটি profile.blade.php নামে ভিউ তৈরী করে jQuery দিয়ে ইমেজ আপলোড করার কোড লিখব।

@extends('app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-6">

                <h3><i class="fa fa-image"></i> Ajax Image Upload</h3>

                <br>

                <h4>User Profile</h4>
                <hr>

                <div style="display: flex;">
                    <div>
                        <img class="imgPreview img img-circle" width="80" src="{{asset('admin/images/default.png')}}"
                             alt="">
                    </div>
                    <div style="margin-left: 15px; flex-grow: 1">


                        <p>Choose a file</p>
                        <input id="photo" type="file">
                        <input type="hidden" name="id" value="{{$user->id}}">
                        <br>
                        <div class="progress">
                            <div class="progress-bar" role="progressbar" aria-valuemin="0"
                                 aria-valuemax="100">

                            </div>
                        </div>

                    </div>
                </div>


                <table class="table table-condensed table-bordered">
                    <tr>
                        <td width="100">Name</td>
                        <td>{{$user->name}}</td>
                    </tr>
                    <tr>
                        <td>E-Mail</td>
                        <td>{{$user->email}}</td>
                    </tr>
                    <tr>
                        <td>Phone</td>
                        <td>{{$user->phone}}</td>
                    </tr>
                    <tr>
                        <td>Address</td>
                        <td>{{$user->address}}</td>
                    </tr>
                </table>
            </div>
        </div>
    </div>

    <script>
        $(function () {
            $.ajaxSetup({
                headers: {'X-CSRF-Token': '{{csrf_token()}}'}
            });

            var id = $('input[name="id"]').val();


            $('#photo').change(function () {
                var photo = $(this)[0].files[0];
                var formData = new FormData();
                formData.append('id', id);
                formData.append('photo', photo);

                $.ajax({
                    xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete * 100);
                                console.log(percentComplete);
                                $('.progress-bar').css('width', percentComplete + '%');
                                if (percentComplete === 100) {
                                    console.log('completed 100%')

                                    var imageUrl = window.URL.createObjectURL(photo)
                                    $('.imgPreview').attr('src', imageUrl);
                                    setTimeout(function () {
                                        $('.progress-bar').css('width', '0%');
                                    }, 2000)
                                }
                            }
                        }, false);
                        return xhr;
                    },
                    url: '{{url('admin/profile')}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log(data);
                    }
                })
            })
        })
    </script>
@endsection

আমি এইখানে ইউআই আর জেকুয়েরীর কোড একই সাথে করেছি। আপনারা চাইলে জেকুয়েরীর কোড আলাদা ফাইলে করে তা লিংক করিয়ে দিতে পারেন।

সবকিছু ঠিকটাকমত হলে আমরা নিন্মোক্ত আউটপুট ও Ajax image upload সফলভাবে করতে পারব।