Cara Upload File menggunakan Filesystem Storage di Laravel

Cara Upload File menggunakan Filesystem Storage di Laravel, tutorial upload file ke storage – Halo semuanya berjumpa lagi dengan kodingin : tutorial belajar Laravel lengkap. Pada kesempatan kali ini akan membahas mengenai cara upload file menggunakan filesystem storage di Laravel.

Cara Upload File menggunakan Filesystem Storage di Laravel

Laravel telah mendukung upload file ke dalam file storage baik pada projek Laravel itu sendiri maupun di penyimpanan object berasal dari sever yang terpisah, seperti AWS S3, Google Drive, Dropbox dan masih banyak lagi.

Keuntungan menggunakan filesystem storage pada Laravel yaitu dapat di lakukan penyimpanan file yang berbeda server. Hal ini dapat mengurangi ukuran server untuk projek Laravel tersebut. Selain itu juga dapat mempercepat load website.

Yuk langsung saja kita mulai.

Install Projek Laravel 6

Seperti menginstall Laravel pada umumnya :

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

Projek contoh di atas bernama file_storage.

Jika sudah silahkan buka projek Laravel di teks editor kesukaan anda.

Membuat Routing Baru

Buat 2 Routing yang berguna untuk membua form upload dan untuk memproses upload gambar ke storage.

routes/web.php

Route::get("create", "ImageController@create");
Route::post("store", "ImageController@store")->name("store");

Membuat Controller Baru

Buat coontroller dengan perintah :

php artisan make:controller ImageController

Jika sudah ubah ImageController dengan kode PHP di bawah ini :

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
    public function index()
    {
        return view("images");
    }
    public function create()
    {
        return view('create');
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'featured_image' => 'required|file|max:7000', // max 7MB
        ]);
        $path = Storage::putFile(
            'public/images',
            $request->file('featured_image'),
        );

        return redirect()
            ->back()
            ->withSuccess("Image succes Uploaded in " . $path);
    }
}

Perhatikan kode di atas, method create() digunakan untuk memanggil views dengan nama create. Sedangkan pada method store() digunakan untuk melakukan upload file ke storaga Laravel.

Baca Juga : Cara menggunakan Datatables di Laravel dengan Database MySQL

Perlu di ketahui letak file Storage Lokal laravel di folder storage/app. Proses upload file gambar di atas di letakkan pada folder images di dalam folder storage. Sehingga nantinya terletak di folder storage/app/public/images.

Kenapa masuknya ke dalam folder storage/app ?

Semua ini sebenarnya sudah di atur di Laravel di config/filesystems.php. Secara default pengaturan storage menggunakan drive lokal (storage/app).

Membuat Views baru Form Upload

Selanjutnya buat form yang di gunakan untuk melakukan upload gambar di Laravel.

Resources/views/create.blade.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Upload File Store Laravel | Kodingin</title>
  </head>
  <body class="container p-5">
    <h1>Select Image</h1>
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <form action="{{ route('store') }}" method="post" enctype="multipart/form-data">
        @csrf
        <input type="file" name="featured_image" id="" class="form-control"><br>
        <button type="submit" class="btn btn-dark form-control">Upload Now</button>
    </form>
  </body>
</html>

Perhatikan kode views di atas, terdapat input dengan tipe file yang digunakan untuk mengambil gambar di penyimpanan PC. Form di atas menggunakan method POST yang di arahkan ke route dengan nama “store”.

Uji Coba Upload File di Laravel File Storage

Jalankan laravel Build Server :

php artisan serve

Selanjutnya silahkan buka URL : http://127.0.0.1:8000/create

Cara Upload File menggunakan Filesystem Storage di Laravel

Silahkan pilih gambar yang ingin di upload ke file Storage.

Jika sudah silahkan klik button Upload Now.

Cara Upload File menggunakan Filesystem Storage di Laravel

Jika berhasil akan di alihkan ke halaman form upload dengan keterangan sukses.

Sekarang saatnya melihat file yang telah kita upload. Nama hasil file Upload pada File Storage secara default berbeda dengan nama asli file gambar yang di upload.

Silahkan periksa folder storage/app/public/images.

Cara Upload File menggunakan Filesystem Storage di Laravel

File gambar yang telah di upload sudah masuk ke dalam direkotori lokal filesystem Storage.

Cara menampilkan Gambar dari Filesystem Storage Laravel

Selanjutnya mari kita lihat gambar yang telah di upload ke dalam browser dan mendonwloadnya.

Silahkan tambahkan route baru :

routes/web.php

Route::get("images", "ImageController@index");

Selanjutkan tambah kan method di ImageController dengan kode berikut ini :

<?php

namespace App\Http\Controllers;

use Exception;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;

class ImageController extends Controller
{
    public function index()
    {
        return view("images");
    }
    public function create()
    {
        return view('create');
    }

    public function store(Request $request)
    {
        $this->validate($request, [
            'featured_image' => 'required|file|max:7000', // max 7MB
        ]);
        $path = Storage::putFile(
            'public/images',
            $request->file('featured_image'),
        );

        return redirect()
            ->back()
            ->withSuccess("Image succes Uploaded in " . $path);
    }
}

Setelah itu buat views baru untuk menampilkan file gambar dari file storage.

resources/views/images.blade.php

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

    <title>Upload File Store Laravel | Kodingin</title>
  </head>
  <body class="container p-5">
    <h1>All Image</h1>
    @if(session('success'))
        <div class="alert alert-success">
            {{ session('success') }}
        </div>
    @endif

    <table class="table table-bordered">
        <tr>
            <th>File</th>
            <th>Donwload</th>
        </tr>
        <tr>
            <?php $path = Storage::url('images/rxggoBceDIouZhkGjPNKdeQ2IFzYw3j9zx57E1vh.png'); ?>
            <th><img width="100px" src="{{ url($path) }}" alt="" srcset=""></th>
            <th><a href="{{ url($path) }}">Donwload Now</a></th>
        </tr>
    </table>
  </body>
</html>

kode “images/rxggoBceDIouZhkGjPNKdeQ2IFzYw3j9zx57E1vh.png” merupakan nama gambar yang ada di file store Laravel. Silahkan ubah sesuai dengan gambar yang anda miliki.

Perlu di ketahui bahwa routing public maupun routing pada umum nya tidak di ijinkan untuk melakukan akses ke file storaage, hal ini untuk kemamanan data.

Lalu bagaimana cara menampilkan file gambar yang ada di file Storage ?

Caranya dengan membuat symbolic link. Dengan mengetikkan perintah di bawah ini :

php artisan storage:link

Perintah di atas akan membuat nama folder di dalam folder public dengan nama storage di ikuti dengan nama sub folder di storage jika ada.

Jika sudah silahkan lakukan uji coba untuk menampilkan gambar dari filesystem storage laravel.

Silahkan buka URL : http://127.0.0.1:8000/images

Hasilnya :

Cara Upload File menggunakan Filesystem Storage di Laravel

Gambar di atas menujukkan kita berhasil menampilkan gambar dari filesystem storage yang di symbolic ke dalam folder public laravel.

Sekian tutorial Cara Upload File menggunakan Filesystem Storage di Laravel. Semoga bermanfaat.

4 Comments

  1. kalau manggil data lewat db gimana ya mas?

    • Tinggal panggil saja field yang di pakai gan, cara pemanggilan nya sama, dimana pemanggilan Storage::url(inifieldyangdigunakanuntukmenyimpannamagambar)

  2. bagaimana dengan upload file docx atau pdf gan?

  3. Bang kalo misalkanfile laravelnya di hosting apakah php artisan storage:link Tetap jalan?

Leave a Reply