How to Upload File/Image using Livewirie in Laravel 8?

I will show you today step by step tutorial livewire file upload laravel 8 . you can visually perceive laravel livewire file upload full example. we will avail you to give examples of file upload with laravel livewire in your project. This method use laravel livewire store upload file in this tutorial.

In this tutorial, we will engender a simple file upload utilizing laravel livewire. you can utilize laravel livewire laravel 8 versions.

We learn Livewire is a full-stack framework for Laravel makes building dynamic interfaces, without leaving the comfort of Laravel. If you are utilizing livewire with laravel then you don't worry about inditing jquery ajax code, livewire file upload will avail to indite a very simple way jquery ajax code utilizing PHP. without page refresh laravel validation will work, a form will submit, etc.

I will give you a very simple to creating files upload form with title and name and I will store that data to database without refresh page and too many lines of code in blade file. we will use only the livewire/livewire package.

Step 1 : Install Laravel 8

First of all, we need to get a fresh Laravel 8 version application using bellow command, So open your terminal OR command prompt and run bellow command:

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

Step 2 : Create Migration And Model

We need to create database migration for the files table and also we will create a model for the files table.

php artisan make:migration create_files_table

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

php artisan migrate

Now we will create a File model by 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

We will simply install livewire to our laravel 8 application using bellow command:

composer require livewire/livewire

Step 4: Create Component

We will create a livewire component using their command. so run the below command to create a file upload form component.

php artisan make:livewire file-upload

Now they created files on both paths:Now both files we will update as below for our contact us form.

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

we will create one route for calling our example, so let's add a new route to the web.php file as bellow:

routes/web.php

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

Step 6: Create View File

We will create a blade file for the call form route. In this file we will use @livewireStyles, @livewireScripts, and @livewire('contact-form'). So let's add it.

resources/views/default.blade.php

<!DOCTYPE html>
<html>
<head>
    <title>File Upload - HackTheStuff</title>
    @livewireStyles
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    
<div class="container">
    
    <div class="card">
      <div class="card-body">
        @livewire('file-upload')
      </div>
    </div>
        
</div>
    
@livewireScripts
</body>
    
</html>

Now you can run using the below command:

php artisan serve

Open bellow URL:

http://localhost:8000/file-upload

i hope you like this article.