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 :
<?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->bigIncrements('id');
$table->string('title');
$table->string('name');
$table->timestamps();
});
}
/**
* Reverse the migrations.
*
* @return void
*/
public function down()
{
Schema::dropIfExists('files');
}
}
php artisan migrate
php artisan make:model File
App/File.php
<?php
namespace App;
use Illuminate\Database\Eloquent\Model;
class File extends Model
{
protected $fillable = [
'title','name',
];
}
Step 3:
Install Livewire
composer require livewire/livewire
Step 4:
Create Component
php artisan make:livewire file-form
app/Http/Livewire/FileForm.php
<?php
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');
$validatedData['name']=$filename;
File::create($validatedData);
session()->flash('message', 'File successfully Uploaded.');
return redirect()->to('/form-file');
}
public function render()
{
return view('livewire.file-form');
}
}
resources/views/livewire/file-form.blade.php
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<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>
<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
</div>
<button type="submit">Save</button>
</form>
Step 5:
Create Route
Route::get('/form-file', function () {
return view('formfile');
});
Step 6:
Create View File resources/views/formfile.blade.php
<!DOCTYPE html>
<html>
<head>
<title></title>
@livewireStyles
<link rel="stylesheet" href="{{ asset('css/app.css') }}">
</head>
<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>
<div class="card-body">
@livewire('file-form')
</div>
</div>
</div>
</div>
</div>
</body>
<script src="{{ asset('js/app.js') }}"></script>
@livewireScripts
</html>
Run this command:
php artisan serve
Open this URL:
http://localhost:8000/form-file
I hope this example helps you.