Hello Devs,

In this tutorial, we are going to learn how to create livewire file upload in laravel.

Follow this step by step guide given below: 




Step 1 :

 

Install Laravel 7

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



Step 2 : 

Create Migration and Model

php artisan make:migration create_contacts_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->bigIncrements('id');
            $table->string('title');
            $table->string('name');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('files');
    }
}

php artisan migrate

php artisan make:model File

App/File.php

<?php

namespace App;

use Illuminate\Database\Eloquent\Model;

class File extends Model
{
    protected $fillable = [
        'title','name', 
    ];
}



Step 3:

 Install Livewire

composer require livewire/livewire



Step 4: 

Create Component

php artisan make:livewire file-form

app/Http/Livewire/FileForm.php

<?php

namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use App\File;

class FileForm extends Component
{
    use WithFileUploads;
    public $title;
	public $name;

    public function submit()
    {
        $validatedData = $this->validate([
            'title' => 'required',
            'name' => 'required',
        ]);

        $filename = $this->name->store('files','public');

        $validatedData['name']=$filename;

        File::create($validatedData);

        session()->flash('message', 'File successfully Uploaded.');

        return redirect()->to('/form-file');
    }

    public function render()
    {
        return view('livewire.file-form');
    }
}

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

@if (session()->has('message'))
    <div class="alert alert-success">
        {{ session('message') }}
    </div>
@endif
<form wire:submit.prevent="submit" enctype="multipart/form-data">
	<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="name">
	    @error('name') <span class="text-danger">{{ $message }}</span> @enderror
    </div>

    <button type="submit">Save</button>
</form>



Step 5: 

Create Route

Route::get('/form-file', function () {
    return view('formfile');
});



Step 6: 


Create View File resources/views/formfile.blade.php

<!DOCTYPE html>
<html>
<head>
    <title></title>
    @livewireStyles
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<body style="background-color: #dcef62;">
  
<div class="container mt-5">
    <div class="row">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">
            Laravel Livewire File Upload - Nicesnippets.com
          </div>
          <div class="card-body">
            @livewire('file-form')
          </div>
        </div>
      </div>
    </div>
      
</div>
  
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>



Run this command:

php artisan serve


Open this URL:

http://localhost:8000/form-file


I hope this example helps you.