Kritim Yantra
Mar 24, 2025
In the first part of this blog (Laravel 12 File Storage), we covered the basics of Laravel's file storage system, including configuration, file operations, and working with cloud storage. Now, let’s dive into a real-world example to solidify your understanding. We’ll build a simple user profile system where users can upload and manage their profile pictures.
This example will cover:
By the end of this tutorial, you’ll have a fully functional profile picture upload feature in your Laravel 12 application.
First, let’s create a migration to add a profile_picture column to the users table.
Run the following Artisan command to create a migration:
php artisan make:migration add_profile_picture_to_users_table
In the migration file, add the profile_picture column:
public function up()
{
Schema::table('users', function (Blueprint $table) {
$table->string('profile_picture')->nullable();
});
}
public function down()
{
Schema::table('users', function (Blueprint $table) {
$table->dropColumn('profile_picture');
});
}
Run the migration to update the users table:
php artisan migrate
Next, let’s create a form where users can upload their profile picture.
resources/views/profile/edit.blade.php)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Profile</title>
</head>
<body>
<h1>Edit Profile</h1>
@if(session('success'))
<div style="color: green;">{{ session('success') }}</div>
@endif
<form action="{{ route('profile.update') }}" method="POST" enctype="multipart/form-data">
@csrf
@method('PUT')
<label for="profile_picture">Profile Picture:</label>
<input type="file" name="profile_picture" id="profile_picture">
<br><br>
<button type="submit">Update Profile</button>
</form>
<br>
<a href="{{ route('profile.show') }}">Back to Profile</a>
</body>
</html>
Now, let’s create the controller methods to handle the file upload.
app/Http/Controllers/ProfileController.php)namespace App\Http\Controllers;
use Illuminate\Http\Request;
use Illuminate\Support\Facades\Storage;
use App\Models\User;
use Illuminate\Support\Facades\Auth;
class ProfileController extends Controller
{
// Show the edit profile form
public function edit()
{
return view('profile.edit');
}
// Update the user's profile picture
public function update(Request $request)
{
$request->validate([
'profile_picture' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048',
]);
$user = Auth::user();
// Delete the old profile picture if it exists
if ($user->profile_picture) {
Storage::disk('public')->delete($user->profile_picture);
}
// Store the new profile picture
$path = $request->file('profile_picture')->store('profile_pictures', 'public');
$user->profile_picture = $path;
$user->save();
return redirect()->route('profile.edit')->with('success', 'Profile picture updated successfully!');
}
// Show the user's profile
public function show()
{
$user = Auth::user();
return view('profile.show', compact('user'));
}
// Delete the user's profile picture
public function destroy()
{
$user = Auth::user();
if ($user->profile_picture) {
Storage::disk('public')->delete($user->profile_picture);
$user->profile_picture = null;
$user->save();
}
return redirect()->route('profile.edit')->with('success', 'Profile picture deleted successfully!');
}
}
Let’s create a view to display the user’s profile.
resources/views/profile/show.blade.php)<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>User Profile</title>
</head>
<body>
<h1>User Profile</h1>
@if($user->profile_picture)
<img src="{{ Storage::url($user->profile_picture) }}" alt="Profile Picture" width="200">
@else
<p>No profile picture uploaded.</p>
@endif
<br><br>
<a href="{{ route('profile.edit') }}">Edit Profile</a>
</body>
</html>
To allow users to delete their profile picture, add a delete button to the edit profile form.
resources/views/profile/edit.blade.php)@if($user->profile_picture)
<img src="{{ Storage::url($user->profile_picture) }}" alt="Profile Picture" width="200">
<br><br>
<form action="{{ route('profile.destroy') }}" method="POST">
@csrf
@method('DELETE')
<button type="submit">Delete Profile Picture</button>
</form>
@endif
In this real-world example, we built a user profile system with profile picture upload functionality. Here’s what we accomplished:
profile_picture column to the users table.This example demonstrates how easy it is to handle file uploads and storage in Laravel 12. You can extend this functionality further by adding validation, supporting multiple file types, or integrating with cloud storage like Amazon S3.
Laravel’s file storage system is incredibly versatile and beginner-friendly. Whether you’re building a simple profile picture upload feature or a complex file management system, Laravel 12 has you covered. Keep experimenting and building, and you’ll soon master file storage in Laravel!
If you have any questions or need further clarification, feel free to leave a comment below. Happy coding!
No comments yet. Be the first to comment!
Please log in to post a comment:
Continue with Google
Kritim Yantra
Kritim Yantra
Kritim Yantra