ahmadajah03 Fri Sep 2020 2 years ago

Contoh Tutorial Upload Gambar di Laravel 8

Saya akan menjelaskan contoh upload gambar 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 menjelaskan secara detail cara mengupload dan menampilkan gambar di laravel 8. Berikut, Membuat contoh dasar upload gambar di laravel 8 dengan preview.

Dalam contoh ini, kita akan membuat dua route, satu untuk metode get dan satu lagi untuk metode posting. kami membuat form sederhana dengan input file. Jadi Anda harus memilih gambar sederhana dan kemudian akan diunggah di direktori "image" dari folder public. Jadi Anda harus mengikuti langkah berikut cara upload gambar di aplikasi laravel 8.

Langkah 1: Instal Laravel 8

Pertama-tama, kita perlu mendapatkan aplikasi versi laravel 8 baru menggunakan perintah di bawah karena kita akan dari awal, Jadi buka terminal atau command prompt dan jalankan perintah di bawah ini:

composer create-project --prefer-dist laravel/laravel blog

Langkah 2: Buat Route

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

routes/web.php

<?php
  
use Illuminate\Support\Facades\Route;
  
use App\Http\Controllers\ImageUploadController;
  
  
Route::get('image-upload', [ ImageUploadController::class, 'imageUpload' ])->name('image.upload');
Route::post('image-upload', [ ImageUploadController::class, 'imageUploadPost' ])->name('image.upload.post');

 

Langkah 3: Buat ImageUploadController

Pada langkah ketiga kita harus membuat ImageUploadController baru dan di sini kita harus menulis dua metode imageUpload () dan imageUploadPost (). Jadi satu metode akan menangani metode get, metode lain untuk posting. Jadi mari tambahkan kode.

app/Http/Controllers/ImageUploadController.php

<?php
  
namespace App\Http\Controllers;
  
use Illuminate\Http\Request;
  
class ImageUploadController extends Controller
{
     /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUpload()
    {
        return view('imageUpload');
    }
    
    /**
     * Display a listing of the resource.
     *
     * @return \Illuminate\Http\Response
     */
    public function imageUploadPost(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
    
        $imageName = time().'.'.$request->image->extension();  
     
        $request->image->move(public_path('images'), $imageName);
  
        /* Store $imageName name in DATABASE from HERE */
    
        return back()
            ->with('success','You have successfully upload image.')
            ->with('image',$imageName); 
    }
}

 

Store Image Ke dalam Folder Storage

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

// storage/app/images/file.png

Store Image Ke dalam Folder Public

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

// public/images/file.png

Store Image Ke dalam S3

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

Langkah 3: Buat File Blade

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 image upload example - Medikre.com.com</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>
    
<body>
<div class="container">
     
    <div class="panel panel-primary">
    <div class="panel-heading"><h2>laravel 8 image upload example - Medikre.com.com</h2></div>
      <div class="panel-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>
        <img src="images/{{ Session::get('image') }}">
        @endif
    
        @if (count($errors) > 0)
            <div class="alert alert-danger">
                <strong>Whoops!</strong> There were some problems with your input.
                <ul>
                    @foreach ($errors->all() as $error)
                        <li>{{ $error }}</li>
                    @endforeach
                </ul>
            </div>
        @endif
    
        <form action="{{ route('image.upload.post') }}" method="POST" enctype="multipart/form-data">
            @csrf
            <div class="row">
    
                <div class="col-md-6">
                    <input type="file" name="image" class="form-control">
                </div>
     
                <div class="col-md-6">
                    <button type="submit" class="btn btn-success">Upload</button>
                </div>
     
            </div>
        </form>
    
      </div>
    </div>
</div>
</body>
  
</html>

Sekarang Anda dapat menjalankan dan memeriksanya.

Saya harap ini dapat membantu Anda ...

laravel laravel 8 image upload with laravel 8 example