Laravel Livewire File Upload Tutorial

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.

laravel livewire file upload

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

Output

laravel livewire file upload


Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420

Notice: ob_end_flush(): failed to send buffer of zlib output compression (1) in /home/u212091429/domains/mydevhelp.com/public_html/wp-includes/functions.php on line 5420