In this video we are going to learn about Livewire File Upload.
So lets see how can upload file in livewire.
First of all lets create model.
So switch to command prompt and run the command.

php artisan make:model Upload

Now switch to the project and lets open the create_uploads_table migration add the following code.

<?php

use Illuminate\\Database\\Migrations\\Migration;
use Illuminate\\Database\\Schema\\Blueprint;
use Illuminate\\Support\\Facades\\Schema;

class CreateUploadsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('uploads', function (Blueprint $table) {
            $table->id();
            $table->string('title');
            $table->string('filename');      
            $table->timestamps();           
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('uploads');
    }
}

Now lets open the Upload Model and add the following code.

<?php

namespace App\\Models;

use Illuminate\\Database\\Eloquent\\Factories\\HasFactory;
use Illuminate\\Database\\Eloquent\\Model;

class Upload extends Model
{
    use HasFactory;

    protected $fillable = ['title','filename'];
}

Now lets migrate this migration.
So switch to the command prompt and run the command.

php artisan migrate

Now lets create the livewire component.
So just run the command.

php artisan make:livewire Uploads.

Now switch to the project and lets create the route for the Uploads component.
So just go inside the routes directory then open web.php and the just add the route.

Route::get(‘/upload’,Uploads::class);

Now open uploads component view file.
And here lets create a form.
I have already added the bootsrap cdn inside the default layout file.

Now go to the Uploads.php component class file and write the following code.

<?php

namespace App\\Http\\Livewire;

use App\\Models\\Upload;
use Livewire\\Component;
use Livewire\\WithFileUploads;

class Uploads extends Component
{
    use WithFileUploads;
    public $title;
    public $filename;   

    public function updated($fields)
    {
        $this->validateOnly($fields,[
            'title' => 'required',
            'filename' => 'required'        
        ]);
    }
    public function fileUpload()
    {
        $validatedData = $this->validate([
            'title' => 'required',
            'filename' => 'required'
        ]);
        
        $filename = $this->filename->store('files','public');
        $validatedData['filename'] = $filename;
        Upload::create($validatedData);
        session()->flash('message','File successfully uploaded');
        $this->emit('fileUploaded');        
    }
}

Now lets open the uploads.blade.php view file and write the following code.

<div>
    <section>
        <div class=\"container\">
            <div class=\"row\">
                <div class=\"col-md-6 offset-md-3\">
                    @if(Session::has('message'))
                        <div class=\"alert alert-success\" role=\"alert\">{{Session::get('message')}}</div>
                    @endif
                    <div class=\"card\">
                        <div class=\"card-header\">
                            File Upload
                        </div>
                        <div class=\"card-body\">
                            <form id=\"form-upload\" wire:submit.prevent=\"fileUpload\" enctype=\"multipart/form-data\">
                                <div class=\"form-group\">
                                    <lable for=\"title\">Ttile</lable>
                                    <input type=\"text\" name=\"title\" class=\"form-control\" wire:model=\"title\" />
                                    @error('title') <p class=\"text-danger\">{{$message}}</p> @enderror
                                </div>

                                <div class=\"form-group\">
                                    <lable for=\"filename\">File</lable>
                                    <input type=\"file\" name=\"filename\" class=\"form-control\" wire:model=\"filename\" />
                                    @error('filename') <p class=\"text-danger\">{{$message}}</p> @enderror
                                </div>

                                <button type=\"submit\" class=\"btn btn-success\">Upload</button>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

Now just go inside the app.blade.php layout file and just before the closing body tag add the following code.

<script>
    window.livewire.on('fileUploaded',()=>{
            $('#form-upload')[0].reset();
        });
</script>

  

All done so lets check this.
So switch to browser and go to the url /uploads.
And here you can see the form.
Now just click on submit.
You can see validation is working.
Now lets enter the title.
And select any file.
And now click on submit.
you can see here the message file uploaded.
Lets check the uploaded file.
So just go inside the project directory Then storage\\Public\\Files and here you can see the file.
Upload one more file.
So just enter the title and choose the file.
And you can see the file uploaded.
So in this way we can Upload File in Livewire.