Cara Upload File Gambar Dengan Laravel 8

Cara Upload File Gambar Dengan Laravel 8

Pada tutorial ini saya akan membahas tentang Cara Upload File Dengan Laravel 8. Jika kita memiliki sebuah aplikasi laravel maka pastinya kita akan membutuhkan suatu fungsi untuk upload file.


Untuk mengikuti tutorial kali ini, kalian harus memiliki sebuah aplikasi project laravel, jika belum memilikinya kalian bisa mengikuti project yang ada di blog Cara Membuat CRUD Pada Laravel 8.


Baik saya akan langsung membuat langkah-langkah dibawah ini dengan project yang sudah saya buat di blog ini.


  1. Silahkan ditambah dulu coloum file pada table product, kemudian silahkan pergi ke file controller [ app\Http\Controllers"ProductController" ] dan cari function store disana sudah ada kodingan dari project sebelumnya yang sudah saya buat. Kita akan menambah sedikit baris koding untuk upload file kita.

    public function store(Request $request)
        {
            // Kode dibawah ini untuk memvalidasi data yang akan di input
            $validate = $request->validate([
                'name' => 'required|max:255|min:3',
                'details' => 'required',
            ]);
    
            // Panggil model Prouct kemudian create semua request yang ada ke dalam table products
    
            Product::create([
                'name' => $request->name,
                'details' => $request->details,
            ]);
    
            // Kembalikan ke halaman index dan berikan pesan success "Data berhasil di tambah"
            return redirect()->route('product.index')->with('success', 'Data berhasil di tambah');
        }

    Kodingan diatas merupakan kodingan dari project yang sudah dibuat, kita akan ganti dengan kodingan dibawah ini :

    // Kode dibawah ini untuk memvalidasi data yang akan di input
            $validate = $request->validate([
                'name' => 'required|max:255|min:3',
                'details' => 'required',
                'file' => 'required|mimes:png,jpg,jpeg,csv,txt,xlx,xls,pdf|max:2048'
            ]);
    
            // Panggil model Prouct kemudian create semua request yang ada ke dalam table products
            $file = $request->file;
            $new_file_name = time() . $file->getClientOriginalName();
            Product::create([
                'name' => $request->name,
                'details' => $request->details,
                'file' => 'uploads/file/' . $new_file_name,
            ]);
    
            $file->move('uploads/file/', $new_file_name);
    
            // Kembalikan ke halaman index dan berikan pesan success "Data berhasil di tambah"
            return redirect()->route('product.index')->with('success', 'Data berhasil di tambah');

  2. Sekarang kita akan ,memodifikasi halaman form upload yang sudah ada dan kodingan dibawah ini adalah kodingan sebelumnya :

    <form action="{{ route('product.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label>Nama</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="Nama Produk">
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>Details</label>
                            <textarea class="form-control @error('details') is-invalid @enderror" name="details" rows="5" placeholder="Detail produk"></textarea>
                            @error('details')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary float-right">Simpan</button>
                    </form>


    Kita ganti dengan kodingan dibawah ini :

    <form action="{{ route('product.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <label>Nama</label>
                            <input type="text" name="name" class="form-control @error('name') is-invalid @enderror" placeholder="Nama Produk">
                            @error('name')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>File</label>
                            <input type="file" name="file" class="form-control @error('file') is-invalid @enderror">
                            @error('file')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <div class="form-group">
                            <label>Details</label>
                            <textarea class="form-control @error('details') is-invalid @enderror" name="details" rows="5" placeholder="Detail produk"></textarea>
                            @error('details')
                            <span class="invalid-feedback" role="alert">
                                <strong>{{ $message }}</strong>
                            </span>
                            @enderror
                        </div>
                        <button type="submit" class="btn btn-primary float-right">Simpan</button>
                    </form>

  3. Jika sudah maka hasilnya akan seperti dibawah ini :

    cara-upload-file-gambar-dengan-laravel-8

Untuk tutorial ini kalian bisa pakai untuk upload file & gambar sesuai kebutuhan kalian

Oke kurang lebih Cara Upload File Gambar Dengan Laravel 8 jika kalian masih bingung, silahkan bertanya di kolom komentar bawah. Semoga tutorial ini bermanfaat untuk kita semua.

Load comments