How to Upload Image to Storage Folder in Laravel 10

As I delve into Laravel 10, a true powerhouse in the realm of PHP frameworks, I've found it to be a game-changer for handling image uploads. Join me in this step-by-step guide as we navigate the seamless integration of image uploading into our Laravel 10 project.

Together, we'll explore the creation of an image upload form, tackle image validation, learn to store images neatly in a designated storage folder, and even conquer the task of displaying them on our website.

By the end of this tutorial, we'll have mastered the art of efficiently managing images in our Laravel 10 application, elevating user interactions, and expanding our web development skills.

So, let's start Laravel 10 upload images to the storage folder, image upload with validation in Laravel 10, and how to display images from the storage folder in Laravel 10.

 

If you don't have a Laravel project already set up, you can create one using Composer.

composer create-project --prefer-dist laravel/laravel laravel_image_upload
cd laravel_image_upload

 

Create a form in one of your views to allow users to upload images. For example, you can create a form in resources/views/upload.blade.php:

<h3>How to Upload Image to Storage Folder in Laravel 10 - Websolutionstuff</h3>
<form action="{{ route('upload') }}" method="POST" enctype="multipart/form-data">
    @csrf
    <input type="file" name="image" accept="image/*">
    <button type="submit">Upload Image</button>
</form>

 

Generate a controller to handle the image upload logic.

php artisan make:controller ImageUploadController

In the ImageUploadController, you can create a method to handle the image upload.

use Illuminate\Http\Request;

class ImageUploadController extends Controller
{
    public function index()
    {
        return view('upload');
    }

    public function upload(Request $request)
    {
        $request->validate([
            'image' => 'required|image|mimes:jpeg,png,jpg,gif|max:2048', // Adjust validation rules as needed
        ]);

        $imagePath = $request->file('image')->store('images', 'public');

        return back()
            ->with('success', 'Image uploaded successfully.')
            ->with('imagePath', $imagePath);
    }
}

 

 

In the routes/web.php file, define the routes for the image upload form and processing.

Route::get('/upload', 'ImageUploadController@index');
Route::post('/upload', 'ImageUploadController@upload')->name('upload');

 

To make uploaded images accessible from the public directory, create a symbolic link.

php artisan storage:link

 

You can display the uploaded images in your views using the symbolic link you created. For example, in a view.

@if (session('imagePath'))
    <img src="{{ asset('storage/' . session('imagePath')) }}" alt="Uploaded Image">
@endif

 

Start your Laravel development server.

php artisan serve

 

This step-by-step guide has shown me how to seamlessly integrate image uploading into my Laravel 10 project, from creating user-friendly upload forms to implementing robust validation and efficient storage solutions.

 

---

You might also like:

• Read Also: How to Use an Image as a Link in React
• Read Also: How to Validate Empty Input Field in jQuery
• Read Also: How To Image Upload In CKeditor With Laravel 10
• Read Also: How to Create a Livewire Image Upload in Laravel 10?