Pada artikel ini, kita akan belajar cara upload gambar dengan preview di laravel 10. Kita juga akan memvalidasi ukuran file dan memvalidasi tipe file sebelum melakukan upload di laravel 10.
Selain itu, kita juga akan membuat folder gambar di path public untuk menyimpan gambar. Selain itu, Anda juga dapat menyimpan gambar di database dan menampilkan pratinjau gambar yang diunggah.
Jadi, mari kita lihat bagaimana cara upload gambar di laravel 10, unggah dan tampilkan gambar laravel 10, dan cara mengunggah gambar dengan pratinjau laravel 10.
Install Laravel 10
Tahapan pertama, kita akan menginstal laravel 10 terlebih dahulu menggunakan perintah berikut. Jadi, jalankan perintah di bawah ini.
composer create-project --prefer-dist laravel/laravel laravel_10_image_upload_example
Membuat Controller
Kemduian, kita akan membuat ImageController baru. Jadi, tambahkan kode berikut ini ke file app/Http/Controllers/ImageController.php.
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class ImageController extends Controller
{
public function index()
{
return view('index');
}
public function store(Request $request)
{
$request->validate([
'image' => 'required|image|mimes:png,jpg,jpeg,svg|max:2048',
]);
$imageName = time().'.'.$request->image->extension();
$request->image->move(public_path('images'), $imageName);
/*
Write Code Here for
Store $imageName name in DATABASE from HERE
*/
return back()->with('success', 'You have successfully uploaded an image.')->with('image', $imageName);
}
}Disini Anda dapat mengubah tempat penyimpanan gambar ke folder Storage, Public, atau S3. Berikut code untuk menyimpan gambar ke 3 folder tersebut.
Simpan gambar di folder Storage:
$request->image->storeAs('images', $imageName);Pada code diatas, gambar akan disimpan di “storage/app/images/image_name.png”
Simpan gambar di folder Public:
$request->image->move(public_path('images'), $imageName);Untuk gambar yang disimpan pada folder Public bisa dilihat di “public/images/image_name.png”
Simpan gambar di S3:
$request->image->storeAs('images', $imageName, 's3');Menambahkan Routes
Sekarang, kita akan menambahkan route pada file routes/web.php.
<?php
use Illuminate\Support\Facades\Route;
use App\Http\Controllers\ImageController;
Route::get('/', function () {
return view('welcome');
});
Route::get('index', [ImageController::class, 'index']);
Route::post('image-upload', [ImageController::class, 'store'])->name('image.store');Membuat Tampilan
Setelah itu, kita akan membuat file index.blade.php. Jadi, tambahkan code HTML berikut ke file tersebut untuk mengunggah gambar dan menampilkan gambar.
<!DOCTYPE html>
<html>
<head>
<title>Laravel 10 Image Upload With Preview - Leravio</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-primary col-md-8">
<div class="panel-heading mt-5">
<h4>Laravel 10 Image Upload With Preview - Leravio</h4>
</div>
<div class="panel-body">
@if ($message = Session::get('success'))
<div class="alert alert-success alert-dismissible fade show" role="alert">
<strong>{{$message}}</strong>
<button type="button" class="close" data-dismiss="alert" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<img class="mb-3" src="images/{{ Session::get('image') }}" style="width: 250px;">
@endif
<form action="{{ route('image.store') }}" method="POST" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label class="form-label" for="inputImage">Image:</label>
<input type="file" name="image" id="inputImage" class="form-control @error('image') is-invalid @enderror">
@error('image')
<span class="text-danger">{{ $message }}</span>
@enderror
</div>
<div class="mb-3">
<button type="submit" class="btn btn-success">Upload</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>Selamat sekarang kita telah berhasil menambahkan upload image di laravel 10. Jika ada pertanyaan, Anda bisa langsung tulis komentar di bawah ini.