Saya akan menjelaskan langkah demi langkah pengunggahan file laravel livewire. Anda bisa melihat contoh upload file laravel livewire. kami akan membantu anda untuk memberikan contoh upload file dengan laravel livewire. Kami akan menggunakan file upload store livewire laravel.

Dalam tutorial ini, kita akan membuat contoh upload file sederhana menggunakan laravel livewire. Anda bisa menggunakan laravel livewire dengan versi laravel 6, laravel 7 dan laravel 8.

Livewire adalah kerangka kerja full stack untuk kerangka kerja Laravel yang membuat membangun antarmuka dinamis sederhana, tanpa meninggalkan kenyamanan Laravel. jika Anda menggunakan livewire dengan laravel maka Anda tidak perlu khawatir menulis kode ajax jquery, livewire akan membantu menulis kode ajax jquery dengan cara yang sangat sederhana menggunakan php. tanpa penyegaran halaman, validasi laravel akan berfungsi, formulir akan dikirim, dll.

Di sini, saya akan memberikan contoh yang sangat sederhana untuk membuat formulir unggah file dengan judul dan nama dan saya akan menyimpan data itu ke database tanpa halaman refresh dan terlalu banyak baris kode di file blade. kami hanya akan menggunakan paket livewire/livewire.

Jadi, mari ikuti langkah berikut dan Anda akan mendapatkan tata letak di bawah ini:

Langkah 1: Instal Laravel 8

pertama-tama kita perlu mendapatkan aplikasi Laravel 8 versi baru menggunakan perintah di bawah ini, Jadi buka terminal OR command prompt Anda dan jalankan perintah di bawah ini:

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

Langkah 2: Buat Migrasi dan Model

Disini kita perlu membuat migrasi database untuk tabel file dan juga akan membuat model untuk tabel file.

php artisan make:migration create_files_table

Migration:

<?php
    
use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;
    
class CreateFilesTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('files', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('name');
            $table->timestamps();
        });
    }
    
    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('files');
    }
}

php artisan migrate

Sekarang kita akan membuat model File dengan menggunakan perintah berikut:

php artisan make:model File

App/Models/File.php

<?php
  
namespace App\Models;
  
use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
  
class File extends Model
{
    use HasFactory;
  
    protected $fillable = [
        'title','name'
    ];
}

Langkah 3: Instal Livewire

Sekarang di langkah ini, kita hanya akan menginstal livewire ke aplikasi laravel 8 kita menggunakan perintah di bawah ini:

composer require livewire/livewire

Langkah 4: Buat Komponen

Sekarang di sini kita akan membuat komponen livewire menggunakan perintah mereka. jadi jalankan perintah di bawah untuk membuat komponen form uploadfile.

php artisan make:livewire file-upload

Sekarang mereka membuat fies di kedua path:

app/Http/Livewire/FileUpload.php
resources/views/livewire/file-upload.blade.php

Sekarang kedua file tersebut akan kami perbarui seperti di bawah untuk form contact us.

app/Http/Livewire/FileUpload.php

<?php
  
namespace App\Http\Livewire;
  
use Livewire\Component;
use Livewire\WithFileUploads;
use App\Models\File;
  
class FileUpload extends Component
{
    use WithFileUploads;
    public $file, $title;
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function submit()
    {
        $validatedData = $this->validate([
            'title' => 'required',
            'file' => 'required',
        ]);
  
        $validatedData['name'] = $this->file->store('files', 'public');
  
        File::create($validatedData);
  
        session()->flash('message', 'File successfully Uploaded.');
    }
  
    /**
     * Write code on Method
     *
     * @return response()
     */
    public function render()
    {
        return view('livewire.file-upload');
    }
}

resources/views/livewire/file-upload.blade.php

<form wire:submit.prevent="submit" enctype="multipart/form-data">
  
    <div>
        @if(session()->has('message'))
            <div class="alert alert-success">
                {{ session('message') }}
            </div>
        @endif
    </div>
  
    <div class="form-group">
        <label for="exampleInputName">Title:</label>
        <input type="text" class="form-control" id="exampleInputName" placeholder="Enter title" wire:model="title">
        @error('title') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
    <div class="form-group">
        <label for="exampleInputName">File:</label>
        <input type="file" class="form-control" id="exampleInputName" wire:model="file">
        @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>
  
    <button type="submit" class="btn btn-success">Save</button>
</form>

Langkah 5: Buat Route

sekarang kita akan membuat satu route untuk memanggil contoh kita, jadi mari tambahkan route baru ke file web.php seperti di bawah ini:

routes/web.php

Route::get('file-upload', function () {
    return view('default');
});

Langkah 6: Buat File Blade

Di sini, kita akan membuat file blade untuk memanggil route form. di file ini kita akan menggunakan @livewireStyles, @livewireScripts dan @livewire ('contact-form'). jadi mari tambahkan.

resources/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>Laravel Livewire Example - Medikre.com</title>
    @livewireStyles
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
    
<div class="container">
    
    <div class="card">
      <div class="card-header">
        Laravel Livewire Example - Medikre.com
      </div>
      <div class="card-body">
        @livewire('file-upload')
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
  
</html>

Sekarang Anda dapat menjalankan menggunakan perintah di bawah ini:

php artisan serve

Buka URL di bawah:

http://localhost:8000/file-upload

Saya harap ini dapat membantu Anda ...