In this tutorial, we will be creating a simple file upload example using Laravel livewire. You can use Laravel livewire with Laravel framework 6, Laravel 7, Laravel 8, and Laravel 9 versions.
Livewire is a full-stack framework for Laravel framework that is used to build simple dynamic interfaces, without leaving the comfort of Laravel. In case you are using livewire with Laravel then you don’t have to worry about writing jQuery ajax code, livewire will help you to write a very simple way jQuery ajax code using PHP.
Here, we have taken a very simple example to create a file upload form with the title and name.
Step 1: Install Laravel
First, let’s Install the latest Laravel application using the below command. Open your terminal OR command prompt and run the below command:
composer create-project --prefer-dist laravel/laravel blog
Step 2: Create Migration and Model
Create database migration for the files table and model for the files table.
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
now we will create the File model by using the following command:
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' ]; }
Step 3: Install Livewire
Install livewire to Laravel application using the below command:
composer require livewire/livewire
Step 4: Create Component
Create a livewire component using their command. so run the below command to create the file upload form component.
php artisan make:livewire file-upload
After creating files on both paths:
app/Http/Livewire/FileUpload.php
resources/views/livewire/file-upload.blade.php
We will update both files using the below command below for our contact us form.
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>
Step 5: Create Route
Create one route for calling our example, so let’s add a new route to the web.php file as below:
routes/web.php
Route::get('file-upload', function () { return view('default'); });
Step 6: Create View File
Create blade file for call form route. In this file, we will use @livewireStyles, @livewireScripts, and @livewire(‘contact-form).
resources/views/default.blade.php
<!DOCTYPE html> <html> <head> <title>Laravel Livewire Example</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 </div> <div class="card-body"> @livewire('file-upload') </div> </div> </div> </body> @livewireScripts </html>
php artisan serve