How to upload Image in laravel 10

Laravel10 is one of the most popular PHP frameworks that is widely used for developing robust web applications. One of the common features of web applications is the ability to upload images, and Laravel provides several methods for handling image uploads. In this article, we will discuss how to upload an image in Laravel 10.

Step 1: Create a Form to Upload Image

The first step is to create a form to upload an image. You can use Laravel’s built-in form helpers to create the form. Here is an example of a basic form:

<form action="{{ route('upload.image') }}" method="POST" enctype="multipart/form-data">
  @csrf
  <input type="file" name="image">
  <button type="submit">Upload</button>
</form>

In this example, we have created a form with an input field of type “file” to allow users to select an image file to upload. We have also added the CSRF token to the form to prevent cross-site request forgery attacks.

Step 2: Create a Route to Handle Image Upload

The next step is to create a route to handle the image upload. You can define a route in your web.php file like this:

Route::post('/upload-image', 'ImageController@upload')->name('upload.image');

In this example, we have defined a POST route that points to the “upload” method of the “ImageController”. We have also given the route a name of “upload.image”, which we will use later in our form.

Step 3: Create a Controller to Handle Image Upload

The next step is to create a controller to handle the image upload. You can create a controller using Laravel’s Artisan command-line tool like this:

php artisan make:controller ImageController

This command will create a new file called “ImageController.php” in your “app/Http/Controllers” directory.

In your ImageController, you can create the “upload” method to handle the image upload like this:

public function upload(Request $request)
{
$image = $request->file(‘image’);
$imageName = $image->getClientOriginalName();
$image->move(public_path(‘images’), $imageName);

return back()->with('success','Image has been uploaded successfully.');

}

In this example, we are first getting the uploaded image file from the request using the “file” method. We are then getting the original name of the image file using the “getClientOriginalName” method. We are then moving the image to the “public/images” directory using the “move” method.

Finally, we are returning a success message to the user using the “with” method.

Step 4: Display the Uploaded Image

Now that we have successfully uploaded the image, we may want to display it on our website. In Laravel 10, displaying an uploaded image is straightforward.

Access the Uploaded Image To access the uploaded image, we can use Laravel’s asset function. The asset function generates a URL for the given path, which can be used to access the file in the public directory. For example, if we have uploaded an image with the name “example.jpg” in the “public/images” directory, we can access it using the following code:

<img src="{{ asset('images/example.jpg') }}" alt="Example Image">

Use a Dynamic Image Name In many cases, we may want to use a dynamic image name, which depends on the user or the content of the page. In our previous example, we generated a unique name for the uploaded image using the current timestamp. To use the same name to display the image, we can pass the image name as a variable to the view.

In the controller method that handles the image upload, we can pass the image name to the view using the with method. For example:

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

In the view, we can then use the variable to display the image. For example:

<img src="{{ asset('images/' . $imageName) }}" alt="Uploaded Image">

Resize and Crop Images In many cases, we may want to resize or crop the uploaded image to fit a specific size or aspect ratio. Laravel 10 provides a convenient way to resize and crop images using the Intervention Image package.

First, we need to install the Intervention Image package using Composer. We can do this by running the following command in the terminal:

composer require intervention/image

Once we have installed the package, we can use it to resize or crop images in our controller method that handles the image upload. For example:

use Intervention\Image\Facades\Image;

public function upload(Request $request)
{
    $image = $request->file('image');
    $imageName = time().'.'.$image->extension();  
    $image->move(public_path('images'), $imageName);

    $image = Image::make(public_path('images/' . $imageName));
    $image->resize(300, null, function ($constraint) {
        $constraint->aspectRatio();
    });
    $image->save();

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

In this example, we first use the Intervention Image package to open the uploaded image and resize it to a width of 300 pixels while maintaining its aspect ratio. We then save the resized image to the same directory.

In the view, we can use the resized image using the same code as before:

<img src="{{ asset('images/' . $imageName) }}" alt="Resized Image">

Conclusion In this article, we have covered how to display an uploaded image in Laravel 10. We have also seen how to use a dynamic image name and how to resize and crop images using the Intervention Image package. By following these steps, you can easily handle image uploads and display them on your website.