How to Import CSV File in Laravel 11 with Livewire 3
Websolutionstuff | Mar-24-2025 | Categories : Laravel
When I started working with Laravel 11 and Livewire 3, I wanted a simple way to import CSV files into my project. It sounded tricky at first, but once I figured it out, it was actually pretty straightforward! In this article, I’m going to share how I did it with you.
Whether you’re building a small app or just learning, I’ll walk you through the process step-by-step in a way that’s easy to follow.
We’ll use Laravel 11 for the backend and Livewire 3 to handle the frontend magic, plus I’ll include some code snippets to make it even clearer.
Step-by-Step Guide: How to Import a CSV File in Laravel 11 with Livewire 3
First, I make sure I have a fresh Laravel 11 project. If you don’t have one yet, you can create it by running this command in your terminal:
composer create-project laravel/laravel csv-import-app
cd csv-import-app
Once the project is ready, I install Livewire 3.
composer require livewire/livewire
Next, I create a Livewire component to handle the CSV upload. I run this Artisan command.
php artisan make:livewire ImportCsv
This generates two files:
- app/Livewire/ImportCsv.php (the backend logic)
- resources/views/livewire/import-csv.blade.php (the frontend view)
Now, I open app/Livewire/ImportCsv.php and add the logic to upload and process the CSV file. Here’s what I use.
<?php
namespace App\Livewire;
use App\Models\User;
use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Facades\Storage;
class ImportCsv extends Component
{
use WithFileUploads;
public $csvFile;
public function import()
{
// Validate the uploaded file
$this->validate([
'csvFile' => 'required|mimes:csv,txt|max:2048', // Max 2MB
]);
// Store the file temporarily
$filePath = $this->csvFile->store('csv_files', 'public');
// Open and read the CSV
$file = Storage::disk('public')->path($filePath);
$data = array_map('str_getcsv', file($file));
foreach ($data as $row) {
User::create([
'name' => $row[0], // Assuming column 1 is name
'email' => $row[1], // Assuming column 2 is email
'password' => bcrypt('password'), // Default password
]);
}
// Optional: Delete the file after processing
Storage::disk('public')->delete($filePath);
session()->flash('message', 'CSV file imported successfully!');
}
public function render()
{
return view('livewire.import-csv');
}
}
Then, I open resources/views/livewire/import-csv.blade.php and add a simple form for uploading the CSV file.
<div>
@if (session()->has('message'))
<div class="alert alert-success">
{{ session('message') }}
</div>
@endif
<form wire:submit.prevent="import">
<div class="mb-3">
<label for="csvFile" class="form-label">Upload CSV File</label>
<input type="file" class="form-control" id="csvFile" wire:model="csvFile">
@error('csvFile') <span class="text-danger">{{ $message }}</span> @enderror
</div>
<button type="submit" class="btn btn-primary">Import CSV</button>
</form>
</div>
I open routes/web.php and add a route to display the component.
use App\Livewire\ImportCsv;
Route::get('/import-csv', ImportCsv::class);
To make it look nice, I use Bootstrap. I add this to resources/views/layouts/app.blade.php.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSV Import</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
@livewireStyles
</head>
<body>
<div class="container mt-5">
{{ $slot }}
</div>
@livewireScripts
</body>
</html>
Then, I update the Livewire component’s render method in ImportCsv.php
public function render()
{
return view('livewire.import-csv')->layout('layouts.app');
}
Finally, I run the project:
php artisan serve
You might also like:
- Read Also: Laravel 11 Livewire 3 wire:submit - Form Submit Event
- Read Also: Laravel 11 Import Export CSV and Excel File
- Read Also: How To Import CSV File In MySQL Using Node.js
- Read Also: Laravel 11 Livewire Datatable Example
Recommended Post
Featured Post
Line Breaks In Laravel Blade
In this post, I will show you how to break lines for Textarea in laravel blade. Many times when you save...
Jul-26-2020
Laravel 9 Barcode Generator Ex...
In this article, we will see laravel 9 barcode generator example. In this example we will use the milon/barcod...
Mar-26-2022
Building a Custom WebSocket Se...
In this tutorial, I'll walk you through the process of building a custom WebSocket server using Laravel 11 and Ratch...
Sep-23-2024
How To Import Export Excel & C...
In this article, we will see how to import and export Excel & CSV files in laravel 10. Here, we will learn about lar...
Mar-08-2023