Laravel 9 Livewire File Upload Example

Websolutionstuff | Dec-02-2022 | Categories : Laravel

In this article, we will see the laravel 9 livewire file upload example. Here, we will learn how to upload files using livewire in laravel 8 and laravel 9. Also, you can validate the file size, and file types in laravel 9. To upload the file, we will add the WithFileUploads trait to your component. Also, we will install the livewire package.

Also, we will upload files and store them in the database in laravel 8 and laravel 9. You can also store files on different storage systems like local filesystem disks, and Amazone s3 buckets.

So, let's see the laravel livewire file upload, livewire file upload in laravel 9, and how to upload files in laravel 8/9 using livewire.

Step 1: Install Laravel 9

In this step, we will install laravel 9 using the following command.

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

 

 

Step 2: Create Migration and Model

Now, we will 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 will migrate the table into the database and create a files table.

php artisan migrate

Now, we will 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

In this step, we will install laravel livewire using the following composer command.

composer require livewire/livewire

 

Step 4: Create Livewire Component

Now, we will 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: Create Route

In this step, we will add routes to the web.php file.

routes/web.php

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

 

Step 6: Create View File

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

resources/views/default.blade.php

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

 


You might also like:

Recommended Post
Featured Post
Laravel 9 Autocomplete Search from Database
Laravel 9 Autocomplete Search...

In this article, we will see laravel 9 autocomplete search from the database. Using ajax autocomplete textbox in la...

Read More

Mar-14-2022

How to Integrate Razorpay Payment Gateway in Laravel
How to Integrate Razorpay Paym...

In this article, we will see the most important and exciting toping about how to integrate razorpay payment gateway in l...

Read More

Jan-06-2021

Laravel 9 MongoDB CRUD Operation Tutorial
Laravel 9 MongoDB CRUD Operati...

In this article, we will see the laravel 9 MongoDB crud operation tutorial. In laravel, we will have many crud operation...

Read More

Dec-06-2022

How To Remove Package From Laravel
How To Remove Package From Lar...

In this article, we will see how to remove the package from laravel. there are different ways to remove packages fr...

Read More

Oct-31-2022