How to File Upload in Laravel 11 Livewire

Hello, laravel web developers! In this article, we'll see how to file upload in laravel 11 Livewire. Here, we'll learn the laravel 11 livewire file upload step-by-step guide. Also, you can validate the file size, and file types in laravel 11.

To upload the file, we'll add the WithFileUploads trait to your component. You can also store files on different storage systems like local filesystem disks, and Amazon S3 buckets.

How to File Upload in Laravel 11 Livewire

In this step, we'll install laravel 11 using the following command.

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

Then, we'll create a migration and model for file upload using the following command.

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');
    }
}

After that, we'll migrate the table into the database and create a file table.

php artisan migrate

Now, we'll create File Mode 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'
    ];
}

Next, we'll install Laravel Livewire using the following composer command.

composer require livewire/livewire

Now, we'll create a livewire file upload component using the following command.

php artisan make:livewire file-upload

app/Http/Livewire/file-upload.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|max:4096',
        ]);
  
        $validatedData['name'] = $this->file->store('files', 'public');
  
        File::create($validatedData);
  
        session()->flash('message', 'File Uploaded Successfully');
    }
  
    /**
     * 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>

Now, we'll define routes to the web.php file.

routes/web.php

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

Now, we'll create a blade file and include @livewireStyles, and @livewireScripts.

resources/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>How to File Upload in Laravel 11 Livewire - Websolutionstuff</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">
        How to File Upload in Laravel 11 Livewire - Websolutionstuff
      </div>
      <div class="card-body">
        @livewire('file-upload')
      </div>
    </div>
        
</div>
    
</body>
  
@livewireScripts
  
</html>

You might also like:

• Read Also: How To File Upload Using Node.js
• Read Also: How To File Upload In Angular 15 Example
• Read Also: How To Import Export Excel & CSV File In Laravel 10
• Read Also: Laravel 11 Create CRUD Operation with Database