Laravel Livewire File Upload

Hi Guys,

In this tutorial,I will learn you how to create livewire file upload in laravel.youcan easy and simply to create file upload in livewire laravel.

First, add the WithFileUploads trait to your component. Now you can use wire:model on file inputs as if they were any other input type and Livewire will take care of the rest.

Here, i will give you very simple example to creating contact form with name and email and i will store that data to database without refresh page and too many lines of code in blade file. we will use only livewire/livewire package.

Step 1 : Install Laravel 7

In this step,you can install laravel 7 application.you can below this command in your terminal.

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

Step 2 : Create Migration and Model

you can create database migration for files table and also we will create model for files table.

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

now we will create Contact model by using following command:

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

now in this step, we will simply install livewire to our laravel 7 application using bellow command:

composer require livewire/livewire

Step 4: Create Component

Now here we will create livewire component using their command. so run bellow command to create contact us form component.

php artisan make:livewire file-form

Now they created fies on both path:

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

you can create blade file for call form route. in this file we will use @livewireStyles, @livewireScripts and @livewire('file-form'). so let's add it.

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>

Now you can run using bellow command:

php artisan serve

Open bellow URL:

http://localhost:8000/form-file

It will help you....