Example Code for Uploading Images in Laravel

Sunday, March 12, 2023

How to Upload Image in Laravel

Example Code for Uploading Images in Laravel

buayaberdiri.blogspot.com - Uploading images is a common requirement in web development, and Laravel makes it easy to handle file uploads with its built-in support for file handling. In this article, we will cover step-by-step instructions on how to upload images in Laravel.

Step 1: Create a form to upload an image

The first step to uploading an image in Laravel is to create a form that allows users to select and upload an image. To create a form in Laravel, you can use the built-in form helper function or plain HTML.

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

This form includes an input field of type file, which allows users to select an image file from their local system. The form also includes a CSRF token to protect against cross-site request forgery attacks.

Step 2: Create a route to handle the image upload request

The next step is to create a route in Laravel that handles the image upload request. In this example, we will create a route named image.upload.post that points to a controller method named uploadImage.

Route::post('image-upload', ['as' => 'image.upload.post', 'uses' => 'ImageController@uploadImage']);

This route is defined in the web.php file in your Laravel application's routes directory. It specifies that the route will accept HTTP POST requests and will be handled by the uploadImage method of the ImageController.

Step 3: Create a controller to handle the image upload request

The next step is to create a controller to handle the image upload request. To create a controller in Laravel, you can use the artisan command:

php artisan make:controller ImageController

This will create a new file named ImageController.php in your Laravel application's app/Http/Controllers directory. Open this file and add the following code:

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class ImageController extends Controller
{
    public function uploadImage(Request $request)
    {
        $imageName = time().'.'.$request->image->extension();
        $request->image->move(public_path('images'), $imageName);

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

This controller method handles the image upload request by extracting the uploaded image from the request object, generating a unique filename for the image, and then moving the image to the public/images directory of your Laravel application. The method also returns a success message to the user and the name of the uploaded image.

Step 4: Display the uploaded image

The final step is to display the uploaded image on your webpage. To do this, you can add an HTML image tag to your view file, and specify the URL of the uploaded image using the asset helper function.

@if(Session::has('success'))
    <div class="alert alert-success">
        {{ Session::get('success') }}
    </div>
@endif

@if(isset($image))
    <div>
        <img src="{{ asset('images/' . $image) }}" alt="">
    </div>
@endif

This view code checks if there is a success message in the session and displays it to the user. If there is an uploaded image, it displays the image using the asset function to generate the URL of the image file.

Conclusion

Uploading images in Laravel is a straightforward process that involves creating a form to upload the image, defining a route to handle the upload request, creating a controller to handle the

See the article about javascript here:

Check out other articles about HTML & CSS:

Buaya Terbang Blog