Untuk membuat fungsi upload image, kita harus membuat link storage dulu di aplikasi laravel kita. Sekarang buka terminal dan jalankan perintah berikut.

php artisan storage:link

Kemudian tekan enter.

Lebih lengkapnya bisa dibaca di dokumentasinya (https://laravel.com/docs/5.8/filesystem#introduction)

# Setting

Agar bisa berjalan dengan sepenuhnya, kita perlu melakukan beberapa setting.

 .env

Buka file .env kemudian cari bagian APP_URL, ubah nilainya menjadi seperti berikut.

APP_URL=http://localhost:8000

filesystems.php

Buka file filesystems.php di dalam folder config, kemudian ubah bagian default menjadi 'public'

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Default Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Here you may specify the default filesystem disk that should be used
    | by the framework. The "local" disk, as well as a variety of cloud
    | based disks are available to your application. Just store away!
    |
    */

    'default' => env('FILESYSTEM_DRIVER', 'public'),

    /*
    |--------------------------------------------------------------------------
    | Default Cloud Filesystem Disk
    |--------------------------------------------------------------------------
    |
    | Many applications store files both locally and in the cloud. For this
    | reason, you may specify a default "cloud" driver here. This driver
    | will be bound as the Cloud disk implementation in the container.
    |
    */

    'cloud' => env('FILESYSTEM_CLOUD', 's3'),

    /*
    |--------------------------------------------------------------------------
    | Filesystem Disks
    |--------------------------------------------------------------------------
    |
    | Here you may configure as many filesystem "disks" as you wish, and you
    | may even configure multiple disks of the same driver. Defaults have
    | been setup for each driver as an example of the required options.
    |
    | Supported Drivers: "local", "ftp", "sftp", "s3", "rackspace"
    |
    */

    'disks' => [

        'local' => [
            'driver' => 'local',
            'root' => storage_path('app'),
        ],

        'public' => [
            'driver' => 'local',
            'root' => storage_path('app/public'),
            'url' => env('APP_URL').'/storage',
            'visibility' => 'public',
        ],

        's3' => [
            'driver' => 's3',
            'key' => env('AWS_ACCESS_KEY_ID'),
            'secret' => env('AWS_SECRET_ACCESS_KEY'),
            'region' => env('AWS_DEFAULT_REGION'),
            'bucket' => env('AWS_BUCKET'),
            'url' => env('AWS_URL'),
        ],

    ],

];

# ImageController

Kembali ke terminal lagi dan buat file ImageController.php dengan mengetik perintah berikut.

php artisan make:controller ImageController

kemudian tekan enter.

Buka file ImageController.php dan isi dengan skrip berikut.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Image;

class ImageController extends Controller
{
    public function index(Request $request) {
        $itemuser = $request->user();
        $itemgambar = Image::where('user_id', $itemuser->id)->paginate(20);
        $data = array('title' => 'Data Image',
                    'itemgambar' => $itemgambar);
        return view('image.index', $data)->with('no', ($request->input('page', 1) - 1) * 20);
    }
    public function store(Request $request)
    {
        $this->validate($request, [
            'image' => 'required|image|mimes:jpeg,png,jpg,gif,svg|max:2048',
        ]);
        $itemuser = $request->user();
        $fileupload = $request->file('image');
        $folder = 'assets/images';
        $itemgambar = $this->upload($fileupload, $itemuser, $folder);
        // $inputan = $request->all();
        // $inputan['user_id'] = $itemuser->id;
        // Image::create($inputan);
        return back()->with('success', 'Image berhasil diupload');
    }

    public function destroy(Request $request, $id) {
        $itemuser = $request->user();
        $itemgambar = Image::where('user_id', $itemuser->id)
                            ->where('id', $id)
                            ->first();
        if ($itemgambar) {
            \Storage::delete($itemgambar->url);
            $itemgambar->delete();
            return back()->with('success', 'Data berhasil dihapus');
        } else {
            return back()->with('error', 'Data tidak ditemukan');
        }
    }
    
    public function upload($fileupload, $itemuser, $folder) {
        $path = $fileupload->store('files');
        $inputangambar['url'] = $path;
        $inputangambar['user_id'] = $itemuser->id;
        return Image::create($inputangambar);
    }
}

# views image

Setelah controller selesai kita buat, selanjutnya buat 1 buah folder dengan nama image di dalam views. Kemudian di dalam folder image buat 1 buah file dengan nama index.blade.php dan isi dengan skrip berikut.

@extends('layouts.dashboard')
@section('content')
<div class="container-fluid">
  <div class="row">
    <div class="col">
      <div class="card">
        <div class="card-header">
          <h3 class="card-title">Image</h3>
        </div>
        <div class="card-body">
          <form action="{{ url('/admin/image') }}" method="post" enctype="multipart/form-data" class="form-inline">
          @csrf
          <div class="form-group">
            <input type="file" name="image" id="image">
          </div>
          <div class="form-group">
            <button class="btn btn-primary">Upload</button>
          </div>
          </form>
        </div>
        <div class="card-body">
          @if(count($errors) > 0)
          @foreach($errors->all() as $error)
              <div class="alert alert-warning">{{ $error }}</div>
          @endforeach
          @endif
          @if ($message = Session::get('error'))
              <div class="alert alert-warning">
                  <p>{{ $message }}</p>
              </div>
          @endif
          @if ($message = Session::get('success'))
              <div class="alert alert-success">
                  <p>{{ $message }}</p>
              </div>
          @endif
          <div class="row">
            @foreach($itemgambar as $gambar)
            <div class="col col-lg-3 col-md-3 mb-2">
              <img src="{{ \Storage::url($gambar->url) }}" alt="img" class="img-thumbnail mb-2">
              <form action="{{ url('/admin/image/'.$gambar->id) }}" method="post" style="display:inline;">
                @csrf
                {{ method_field('delete') }}
                <button type="submit" class="btn btn-sm btn-danger mb-2">
                  Hapus
                </button>                    
              </form>
            </div>
            @endforeach
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
@endsection

# route

Kita perlu menambahkan beberapa route di file web.php untuk fungsi upload image.

<?php

/*
|--------------------------------------------------------------------------
| Web Routes
|--------------------------------------------------------------------------
|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider within a group which
| contains the "web" middleware group. Now create something great!
|
*/

Route::get('/', '[email protected]');
Route::get('/about', '[email protected]');
Route::get('/kontak', '[email protected]');
Route::get('/kategori', '[email protected]');
Route::get('/kategori/{slug}', '[email protected]');
Route::get('/produk', '[email protected]');
Route::get('/produk/{slug}', '[email protected]');

Route::group(['prefix' => 'admin', 'middleware' => 'auth'], function() {
  Route::get('/', '[email protected]');
  // route kategori
  Route::resource('kategori', 'KategoriController');
  // route produk
  Route::resource('produk', 'ProdukController');
  // route customer
  Route::resource('customer', 'CustomerController');
  // route transaksi
  Route::resource('transaksi', 'TransaksiController');
  // profil
  Route::get('profil', '[email protected]');
  // setting profil
  Route::get('setting', '[email protected]');
  // form laporan
  Route::get('laporan', '[email protected]');
  // proses laporan
  Route::get('proseslaporan', '[email protected]');
  // image
  Route::get('image', '[email protected]');
  // simpan image
  Route::post('image', '[email protected]');
  // hapus image by id
  Route::delete('image/{id}', '[email protected]');
});

Auth::routes();

Route::get('/home', '[email protected]')->name('home');

# Trial

Karena kita tidak menambahkan menu upload image di menu dashboard, maka sekarang jalankan aplikasi kita kemudian akses halaman http://localhost:8000/admin/image

Coba upload beberapa gambar dan hapus lagi. Pastikan tidak ada error.

Setelah diupload 2 gambar. Selamat mencoba

Pada tutorial selanjutnya kita akan menambahkan fungsi upload gambar kategori.