How to Upload Image to Storage Folder in Laravel 10

Websolutionstuff | Sep-29-2023 | Categories : Laravel PHP

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.

file_upload_laravel

Step 1: Create a New Laravel Project

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

Step 2: Create a Form for 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>

Step 3: Create a Controller

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

Read Also: CRUD With Image Upload In Laravel 10 Example

Step 4: Define Routes

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

Step 5: Create a Storage Symbolic Link

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

php artisan storage:link

Step 6: Display Uploaded Images

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

Step 7: Run Your Laravel Application

Start your Laravel development server.

php artisan serve

Conclusion:

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: