Hampir setiap aplikasi memiliki fitur untuk mengupload gambar, ini menandakan bahwa fitur upload gambar ini termasuk penting untuk kita pelajari. Pada artikel kali ini kita akan coba bahas secara singkat bagaimana cara mengupload gambar di Laravel 6. Disamping itu, kita juga akan membuat validasi tentang spesifikasi dari kriteria gambar yang boleh kita upload.

Sekali lagi, tutorial ini saya buat singkat padat dan to the point, karena ini sebagai catatan saja, dan diperuntukan untuk pengguna laravel yang sudah familiar/ advance. Adapun untuk artikel mendasar tentang laravel, temen-temen bisa mempelajarinya di BigSource Edu.

Pada contoh kasus kali ini, kita akan membuat dua routes, satu untuk method get dan yang satunya lagi untuk method post. Dan kita akan membuat form inputan untuk gambar yang akan kita upload, kita akan buat versi sederhananya. Lalu kita akan mengatur agar gambar tersebut tersimpan di folder “public/images”. Oke, silahkan temen-temen ikuti langkah-langkah cepatnya dibawah ini.

1. Install Laravel 6

Ini adalah hal mendasar, pertama kita harus menginstal laravel-nya terlebih dahulu. Kita akan menggunakan Laravel versi 6. Kita samakan dengan topik judul artikel ini. Dikarenakan sekarang Laravel sudah masuk versi 8, kita akan lakukan customisasi instalasi Laravel. Ketikan perintah dibawah ini pada terminal atau command prompt temen-temen.

composer create-project --prefer-dist laravel/laravel blog "6.*"

2. Membuat Routes

Hal selanjutnya yang harus kita lakukan adalah membuat routes. Kita akan membuat dua routes, pertama untuk method get, dan yang kedua untuk method post. Langkahnya sangatlah mudah, silahkan temen-temen tulis/ copy sintak dibawah ini.

routes/web.php

Route::get('image-upload', 'ImageUploadController@imageUpload')->name('image.upload');
Route::post('image-upload', 'ImageUploadController@imageUploadPost')->name('image.upload.post');

3. Membuat Controller “ImageUploadController”

Langkah selanjutnya yakni kita membuat controller baru, kita beri nama “ImageUploadController”. Pada controller ini kita akan membuat 2 method, imageUpload() dan imageUploadPost(). Satu method untuk menghandel method get dan yang satunya lagi kita gunakan untuk menghandel method post. Selanjutnya, silahkan tuliskan kode sintak dibawah ini.

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);
   
        return back()
            ->with('success','You have successfully upload image.')
            ->with('image',$imageName);
   
    }
}

4. Membuat File Blade

Disini kita akan membuat file blade untuk menampilkan form inputan dari gambar yang akan kita upload. Kita beri nama filenya dengan nama “imageUpload.blade.php”. Selanjutnya silahkan copy kode sintak dibawah  ini.

resources/views/imageUpload.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Cara Mengupload Gambar di Laravel 6 - Serambi Laravel</title>
    <link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css">
</head>
  
<body>
<div class="container">
   
    <div class="panel panel-primary">
      <div class="panel-heading"><h2>Cara Mengupload Gambar di Laravel 6 - Serambi Laravel</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>

5. Membuat Folder “images”

Langkah terakhir sebelum kita jalankan, silahkan buat folder “images” pada folder “public”. Maka posisi foldenya nanti akan seperti ini “public/images”. Pada folder “images” inilah kita akan menyimpan gambar yang sudah kita upload. Selanjutnya, jalankan programnya, untuk mengeceknya.

Semoga bermanfaat, salam programmer…

https://blog.abdan.xyz/
Do you like Abdan Zam Zam Ramadhan's articles? Follow on social!
Comments to: Cara Mengupload Gambar di Laravel 6

Your email address will not be published. Required fields are marked *

Attach images - Only PNG, JPG, JPEG and GIF are supported.