How to File Upload in Laravel 11 Livewire

Websolutionstuff | Jun-10-2024 | Categories : Laravel

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

How to File Upload in Laravel 11 Livewire

 

Step 1: Install Laravel 11

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

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

 

 

Step 2: Create Migration and Model

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

 

 

Step 3: Install Livewire

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

composer require livewire/livewire

 

Step 4: Create Livewire Component

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>
 
 
Step 5: Define Route

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

routes/web.php

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

 

Step 6: Create View File

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:

Recommended Post
Featured Post
How To Add Bootstrap Modal In Laravel
How To Add Bootstrap Modal In...

Today I will show you how to add a bootstrap popup modal on button click. many times we need to set confirmation on the...

Read More

May-27-2020

How To Get Data Between Two Dates In Laravel 9
How To Get Data Between Two Da...

In this article, we will see how to get data between two dates in laravel 9. Here we will learn how to count d...

Read More

Dec-19-2022

How To Build Live Chat App In Laravel 9 And Vue JS
How To Build Live Chat App In...

In this article, we will see how to build a live chat app in laravel 9 and vue js. Here, we will learn how to creat...

Read More

Feb-02-2023

How To Get Hourly Data In MySQL
How To Get Hourly Data In MySQ...

In this tutorial, we will see how to get hourly data in mysql. Many times we need to get hourly data or we are required...

Read More

Feb-04-2022