Hello Devs,

In this tutorial, we are going to learn how to create livewire file upload in laravel.

Follow this step by step guide given below: 

Step 1 :


Install Laravel 7

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

Step 2 : 

Create Migration and Model

php artisan make:migration create_contacts_table

Migration :


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) {

     * Reverse the migrations.
     * @return void
    public function down()

php artisan migrate

php artisan make:model File



namespace App;

use Illuminate\Database\Eloquent\Model;

class File extends Model
    protected $fillable = [

Step 3:

 Install Livewire

composer require livewire/livewire

Step 4: 

Create Component

php artisan make:livewire file-form



namespace App\Http\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use App\File;

class FileForm extends Component
    use WithFileUploads;
    public $title;
	public $name;

    public function submit()
        $validatedData = $this->validate([
            'title' => 'required',
            'name' => 'required',

        $filename = $this->name->store('files','public');



        session()->flash('message', 'File successfully Uploaded.');

        return redirect()->to('/form-file');

    public function render()
        return view('livewire.file-form');


@if (session()->has('message'))
    <div class="alert alert-success">
        {{ session('message') }}
<form wire:submit.prevent="submit" enctype="multipart/form-data">
	<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 class="form-group">
        <label for="exampleInputName">File</label>
	    <input type="file" class="form-control" id="exampleInputName" wire:model="name">
	    @error('name') <span class="text-danger">{{ $message }}</span> @enderror

    <button type="submit">Save</button>

Step 5: 

Create Route

Route::get('/form-file', function () {
    return view('formfile');

Step 6: 

Create View File resources/views/formfile.blade.php

<!DOCTYPE html>
    <link rel="stylesheet" href="{{ asset('css/app.css') }}">
<body style="background-color: #dcef62;">
<div class="container mt-5">
    <div class="row">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">
            Laravel Livewire File Upload - Nicesnippets.com
          <div class="card-body">
<script src="{{ asset('js/app.js') }}"></script>

Run this command:

php artisan serve

Open this URL:


I hope this example helps you.