Post Detail

Selamat datang kembali di website asepit yang selalu memberikan informasi - informasi mengenai dunia teknologi khususnya pada bidang Komputer dan Jaringan. Bagaimana kabar kalian semua mudah - mudahan dalam keadaan sehat wal afiat dan selalu dimudahkan rezekinya, pembahasan kali ini mengenai cara mengupload gambar dengan ajax sehingga gambar yang di unggah tanpa ada reload pada halaman. Laravel yang saya gunakan disini menggunakan versi 5.8, Oke kita langsung ke langkah - langkah nya

1. Buat route terlebih dahulu 

Route::get('user/profile', 'ProfileController@index')->name('profile');
Route::post('user/profile', 'ProfileController@index')->name('update');

2. Buat view profile / index.blade.php

@extends('layouts.app')
@section('content')
    <div class="container">
        <div class="row">
            <div class="col-md-6">
                <h3><i class="fa fa-image"></i> Profile </h3>
                <br>

                <div style="display: flex;">
                    <div>
                        <img class="imgPreview img img-circle" 
                         width="80" src="https://via.placeholder.com/80">
                    </div>
                    <div style="margin-left: 15px; flex-grow: 1">
                        <p>Masukkan file</p>
                        <input id="images" 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">Nama</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>Alamat</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();

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

                $.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(images)
                                    $('.imgPreview').attr('src', imageUrl);
                                    setTimeout(function () {
                                        $('.progress-bar').css('width', '0%');
                                    }, 2000)
                                }
                            }
                        }, false);
                        return xhr;
                    },
                    url: '{{route('updateProfile')}}',
                    type: 'POST',
                    data: formData,
                    processData: false,
                    contentType: false,
                    success: function (data) {
                        console.log(data);
                        alert(data.message)
                    }
                })
            })
        })
    </script>
@endsection

3. Buat controller dengan perintah berikut

php artisan make:controller ProfileController

<?php
namespace App\Http\Controllers;

use App\User;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Validator;

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

    public function Update(Request $request)
    {
    	$validator = Validator::make($request->all(), [
                		'images' => 'required|image|mimes:png,jpg,jpeg|max:200',
            		]);

        if ($validator->fails()) {
            return response()
                ->json([
                    'success' => false,
                    'error' =>  $validation->errors()->first()
                ]);
        }

        $user = User::find($request->input('id'));

        if ($request->hasFile('images')) {
            $images = $request->file('images');

            $fileName = $user->id . "." . $photo->getClientOriginalExtension();
            $request->file('images')->move(public_path('user-images'), $fileName);
            $user->update(['images' => $fileName]);
        }

        return ['success'=>true,'message'=>'Gambar berhasil di update'];
    }
}

Mungkin hanya itu untuk pembahasan singkat kali ini, Mudah - mudahan dapat membantu dan bermanfaat bagi kita semua. Cukup sekian dan Terima Kasih...!!!