Tutorial PHP | Upload Gambar Laravel 8

Hai kawan,

Di blog ini saya akan menjelaskan cara membuat Upload Gambar di laravel 8. Kami akan menunjukkan contoh upload gambar di laravel 8. Anda dapat dengan mudah membuat

Upload gambar di laravel 8 Saya akan menunjukkan kepada Anda tentang upload gambar di laravel 8. contoh ini akan membantu Anda mengupload gambar di laravel 8 ke database. Artikel ini membahas secara detail cara mengupload dan menampilkan gambar di laravel 8. Berikut, Membuat contoh dasar upload gambar di laravel 8 dengan preview.

Saya membuat formulir sederhana dengan input file. Jadi Anda harus memilih gambar sederhana dan kemudian akan diunggah di direktori “gambar” folder publik. Jadi Anda harus mengikuti langkah berikut dan mendapatkan upload gambar di aplikasi laravel 8.

Di sini, saya akan memberikan contoh lengkap untuk Upload Gambar menggunakan Laravel 8 seperti di bawah ini.

Step 1 : Install Laravel 8 Application

kita pergi dari awal, Jadi kita perlu mendapatkan aplikasi Laravel baru menggunakan perintah di bawah ini, Jadi buka terminal OR command prompt Anda dan jalankan perintah di bawah ini:

composer create–project —prefer–dist laravel/laravel blog

Step 2: Create Routes

Pada langkah selanjutnya, kami akan menambahkan dua rute baru di file web.php. Satu rute untuk menghasilkan formulir dan satu lagi untuk metode posting Jadi mari kita buat kedua rute seperti di bawah ini:

Route::get('/image-upload', [UploadImageController::class, 'index'])->name('image.upload.index');
Route::post('/image-upload/store', [UploadImageController::class, 'store'])->name('image.upload.store')

Step 3: Create Controller

Di sini langkah ini sekarang kita harus membuat pengontrol baru sebagai UploadImageController, Jadi jalankan perintah di bawah ini untuk menghasilkan pengontrol baru

php artisan make:controller UploadImageController

Pada langkah terakhir kita perlu membuat file imageUpload.blade.php dan pada file ini kita akan membuat form dengan tombol input file. Jadi salin di bawah dan letakkan di file itu.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadImageController extends Controller
{
public function index()
{
return view(‘imageUpload’);
}

public function store(Request $request)
{
$request->validate([
‘image’ => ‘required|image|mimes:jpeg,png,jpg,gif,svg|max:1024′,
]);

$imageName = time().’.’.$request->image->extension();

$request->image->move(public_path(‘images’), $imageName);

/ store image in database from here /

return redirect()->back()->with(‘success’,’Image uploaded successfully.’)->with(‘image’,$imageName);
}
}

Store Image in Storage Folder

$request->image->storeAs(‘images’, $imageName);

// storage/app/images/file.png

Store Image in Public Folder

$request->image->move(public_path(‘images’), $imageName);

// public/images/file.png

Store Image in S3

$request->image->storeAs(‘images’, $imageName, ‘s3’);

Step 4: Create Blade File

Pada langkah terakhir kita perlu membuat file imageUpload.blade.php dan pada file ini kita akan membuat form dengan tombol input file. Jadi salin di bawah dan letakkan di file itu.

resources/views/imageUpload.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel 8 Multiple File Upload</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”>
<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css” integrity=”sha256-NuCn4IvuZXdBaFKJOAcsU2Q3ZpwbdFisd5dux4jkQ5w=” crossorigin=”anonymous” />
<link rel=”stylesheet” type=”text/css” href=”https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css”>
<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>
</head>
<body>
<div class=”container”>
<div class=”row”>
<div class=”col-md-6 offset-3 mt-5″>
<div class=”card mt-5″>
<div class=”card-header text-center bg-primary”>
<h2 class=”text-white”> <strong>Multiple File Upload</strong></h2>
</div>
<div class=”card-body”>
@if ($message = Session::get(‘success’))
<div class=”alert alert-success alert-block”>
<button type=”button” class=”close” data-dismiss=”alert”>×</button>
<strong>{{ $message }}</strong>
</div>
@endif
@if (count($errors) > 0)
<ul class=”alert alert-danger pl-5″>
@foreach($errors->all() as $error)
<li>{{ $error }}</li>
@endforeach
</ul>
@endif
<form method=”post” action=”{{ route(‘multiple.file.upload.store’) }}” enctype=”multipart/form-data”>
@csrf
<div class=”input-group file-div control-group lst increment” >
<input type=”file” name=”files[]” class=”myfrm form-control”>
<div class=”input-group-btn”>
<button class=”btn btn-success add-btn” type=”button”><i class=”fldemo fa fa-plus”></i></button>
</div>
</div>
<div class=”clone hide”>
<div class=”file-div control-group lst input-group” style=”margin-top:10px”>
<input type=”file” name=”files[]” class=”myfrm form-control”>
<div class=”input-group-btn”>
<button class=”btn btn-danger” type=”button”><i class=”fldemo fa fa-close”></i></button>
</div>
</div>
</div>
<div class=”row”>
<div class=”col-md-12 text-center mt-4″>
<button type=”submit” class=”btn btn-success rounded-0″><i class=”fa fa-save”></i> Save</button>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script type=”text/javascript”>
$(document).ready(function() {
$(“.add-btn”).click(function(){
var lsthmtl = $(“.clone”).html();
$(“.increment”).after(lsthmtl);
});
$(“body”).on(“click”,”.btn-danger”,function(){
$(this).parents(“.file-div”).remove();
});
});
</script>
</body>
</html>
Now we are ready to run our custom validation rules example so run bellow command for quick run: