Pengunggahan gambar jQuery Laravel dengan pratinjau.
Dalam tutorial ini, Anda akan belajar cara mengunggah gambar dengan pratinjau dan validasi di laravel.
Serta cara mengupload image ke dalam database dan direktori penyimpanan di laravel .
Dan cara memvalidasi image mime type, size, dimensi, dll di laravel controller dengan menggunakan aturan validasi laravel.
Mengunggah gambar dengan pratinjau di laravel adalah hal yang sangat umum dan merupakan persyaratan yang sangat mendasar dari setiap aplikasi laravel.
Laravel Upload Gambar dan Preview
Gunakan langkah-langkah berikut dan unggah gambar dengan pratinjau di aplikasi laravel menggunakan jquery:
Langkah 1 – Unduh Aplikasi Laravel
Pertama-tama, unduh atau instal pengaturan baru laravel. Jadi, buka terminal dan ketik perintah berikut untuk menginstal aplikasi laravel baru ke mesin Anda:
composer create-project --prefer-dist laravel/laravel LaravelImage
Langkah 2 – Siapkan Database dengan Aplikasi
Pada langkah ini, atur database dengan aplikasi laravel yang telah diunduh/diinstal. Jadi, Anda perlu mencari file .env dan mengatur detail database sebagai berikut:
DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=database-name
DB_USERNAME=database-user-name
DB_PASSWORD=database-password
Langkah 3 – Buat Model & Migrasi
Pada langkah ini, buka lagi command prompt Anda. Dan jalankan perintah berikut di atasnya. Untuk membuat file model dan migrasi untuk formulir:
php artisan make:model Photo -m
Setelah itu, buka file create_photos_table.php di dalam direktori Laravel database/migrations/. Dan perbarui fungsi up() dengan kode berikut:
public function up()
{
Schema::create('photos', function (Blueprint $table) {
$table->id();
$table->string('name');
$table->string('path');
$table->timestamps();
});
}
Kemudian, buka lagi command prompt dan jalankan perintah berikut untuk membuat tabel ke dalam database:
php artisan migrate
Langkah 4 – Buat Route
Pada langkah ini, buka file web.php dari direktori route. Dan perbarui rute berikut ke dalam file web.php :
use App\Http\Controllers\ImageUploadController;
Route::get('image-upload-preview', [ImageUploadController::class, 'index']);
Route::post('upload-image', [ImageUploadController::class, 'store']);
Langkah 5 – Hasilkan Pengontrol Dengan Artisan Command
Pada langkah ini, jalankan perintah berikut pada prompt perintah untuk membuat file Controller :
php artisan make:controller ImageUploadController
Setelah itu, buka app/http/controllers dan buka file ImageUploadController.php. Dan perbarui kode berikut ke dalamnya:
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Photo;
class ImageUploadController extends Controller
{
public function index()
{
return view('image-upload');
}
public function store(Request $request)
{
$validatedData = $request->validate([
'image' => 'required|image|mimes:jpg,png,jpeg,gif,svg|max:2048',
]);
$name = $request->file('image')->getClientOriginalName();
$path = $request->file('image')->store('public/images');
$save = new Photo;
$save->name = $name;
$save->path = $path;
return redirect('image-upload-preview')->with('status', 'Image Has been uploaded successfully in laravel');
}
}
Baris kode berikut akan mengunggah gambar ke direktori gambar:
$path = $request->file('image')->store('public/images');
Langkah 6 – Buat View Blade
Sekarang, buat formulir pengunggahan gambar dalam file tampilan blade untuk menampilkan formulir pengunggahan gambar dan kirim ke database.
Jadi, Buka sumber daya/tampilan dan buat image-upload.blade.php dan perbarui kode berikut ke dalamnya:
<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Image Upload With Preview - Tutsmake.com</title>
<meta name="csrf-token" content="{{ csrf_token() }}">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-4">
<h2 class="text-center">Image Upload with Preview using in Laravel 8 - Tutsmake.com</h2>
<form method="POST" enctype="multipart/form-data" id="upload-image" action="{{ url('upload-image') }}" >
<div class="row">
<div class="col-md-12">
<div class="form-group">
<input type="file" name="image" placeholder="Choose image" id="image">
@error('image')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
</div>
</div>
<div class="col-md-12 mb-2">
<img id="preview-image-before-upload" src="https://www.riobeauty.co.uk/images/product_image_not_found.gif"
alt="preview image" style="max-height: 250px;">
</div>
<div class="col-md-12">
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</div>
</div>
</form>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function (e) {
$('#image').change(function(){
let reader = new FileReader();
reader.onload = (e) => {
$('#preview-image-before-upload').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
});
</script>
</div>
</body>
</html>
Kode di bawah ini akan menampilkan pesan kesalahan validasi pada file tampilan blade:
@error('image')
<div class="alert alert-danger mt-1 mb-1">{{ $message }}</div>
@enderror
Langkah 7 – Terapkan Kode javascript untuk Menampilkan Pratinjau Gambar
Pada langkah ini, terapkan kode javascript untuk menampilkan pratinjau gambar sebelum diunggah ke database dan folder penyimpanan.
Kami telah mengimplementasikan kode ini, sehingga Anda dapat menambahkan kode ini ke dalam file tampilan blade:
<script type="text/javascript">
$(document).ready(function (e) {
$('#image').change(function(){
let reader = new FileReader();
reader.onload = (e) => {
$('#preview-image-before-upload').attr('src', e.target.result);
}
reader.readAsDataURL(this.files[0]);
});
});
</script>
Langkah 8 – Buat Direktori Gambar di dalam Storage/app/public
Sekarang, buat direktori gambar di dalam direktori Storage/app/public. Karena baris kode berikut akan mengunggah gambar ke dalam direktori images, yang terletak di dalam direktori storage/app/public/ :
$path = $request->file('image')->store('public/images');
Langkah 9 – Jalankan Server Pengembangan
Langkah terakhir, buka command prompt dan jalankan perintah berikut untuk memulai server pengembangan:
php artisan serve
Kemudian buka browser Anda dan tekan url berikut di atasnya:
http://127.0.0.1:8000/image-upload-preview
