How to Upload Image in Laravel

Introduction: Uploading photos is a common feature in many web applications, and Laravel provides a powerful framework for handling file uploads. If you are working with Laravel and want to implement a photo upload functionality, this step-by-step guide will walk you through the process. By following these steps, you will learn how to set up the necessary routes, create a form for file uploads, handle the file in the controller, and store it in the desired location. Let’s get started!

Table of Contents:

1. Prerequisites
2. Setting Up a Laravel Project
3. Creating the Photo Upload Form
4. Handling the File Upload in the Controller
5. Validating the Uploaded Photo
6. Storing the Photo in the Desired Location
7. Displaying the Uploaded Photo
8. Conclusion

1. Prerequisites

Before proceeding with the photo upload in Laravel, ensure that you have the following prerequisites:

• A basic understanding of Laravel framework and its concepts.
• A working Laravel project set up on your development environment.
• Familiarity with HTML forms and file handling concepts.

2. Setting Up a Laravel Project

If you don’t have a Laravel project set up yet, follow these steps to create a new Laravel project:

1. Install Laravel using Composer by running the following command:

composer global require laravel/installer

2. Create a new Laravel project using the following command:

laravel new project-name

Replace “project-name” with the desired name for your project.

Navigate to the project directory:

cd project-name

4. Start the development server:

php artisan serve

3. Creating the Photo Upload Form

To create the photo upload form, follow these steps:

1. Open the “resources/views” directory in your Laravel project.
2. Create a new file called “upload.blade.php” using a text editor.
3. Add the following HTML code to the “upload.blade.php” file:

<form method="POST" action="/upload" enctype="multipart/form-data">
    @csrf
    <input type="file" name="photo">
    <button type="submit">Upload Photo</button>
</form>

Save the file.

4. Handling the File Upload in the Controller

To handle the file upload in Laravel, follow these steps:

1. Open the “app/Http/Controllers” directory in your Laravel project.
2. Open the existing or create a new controller file, for example, “UploadController.php”.
3. Add the following code to the controller file:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class UploadController extends Controller
{
    public function upload(Request $request)
    {
        if ($request->hasFile('photo')) {
            $file = $request->file('photo');
            // Handle the file upload logic here
        }
        
        return redirect()->back()->with('message', 'Photo uploaded successfully!');
    }
}

Save the file.

5. Validating the Uploaded Photo

To validate the uploaded photo, follow these steps:

1. Modify the “upload” method in the controller as follows:

public function upload(Request $request)
{
    $request->validate([
        'photo' => 'required|image|max:2048', // Adjust the maximum file size as needed
    ]);

    if ($request->hasFile('photo')) {
        $file = $request->file('photo');
        // Handle the file upload logic here
    }
    
    return redirect()->back()->with('message', 'Photo uploaded successfully!');
}

Save the file.

6. Storing the Photo in the Desired Location

To store the uploaded photo in a desired location, follow these steps:

1. Modify the “upload” method in the controller as follows:

public function upload(Request $request)
{
    $request->validate([
        'photo' => 'required|image|max:2048',
    ]);

    if ($request->hasFile('photo')) {
        $file = $request->file('photo');
        $filename = time() . '_' . $file->getClientOriginalName();
        $path = $file->storeAs('photos', $filename); // Adjust the storage path as needed
        // Additional logic can be added here, such as saving the file path to the database
    }
    
    return redirect()->back()->with('message', 'Photo uploaded successfully!');
}

Save the file.

7. Displaying the Uploaded Photo

To display the uploaded photo, follow these steps:

1. Open the “upload.blade.php” file.
2. Add the following code below the form:

@if (session('message'))
    <div>{{ session('message') }}</div>
@endif

@if (isset($path))
    <img src="{{ asset('storage/' . $path) }}" alt="Uploaded Photo">
@endif

Save the file.

8. Conclusion

Congratulations! You have successfully implemented photo upload functionality in your Laravel project. By following this guide, you learned how to create a photo upload form, handle the file upload in the controller, validate the uploaded photo, store it in the desired location, and display the uploaded photo on the web page. Feel free to customize the code and enhance the functionality to meet your specific requirements. File uploads are an essential feature in many web applications, and Laravel simplifies the process with its robust file handling capabilities.

Check My Social Profile Links

Instagram

Youtube

Website

About The Author