{"id":2806,"date":"2025-10-07T11:12:03","date_gmt":"2025-10-07T11:12:03","guid":{"rendered":"https:\/\/200oksolutions.com\/blog\/?p=2806"},"modified":"2025-12-04T07:44:02","modified_gmt":"2025-12-04T07:44:02","slug":"cloudinary-integration-in-laravel-a-step-by-step-guide","status":"publish","type":"post","link":"https:\/\/www.200oksolutions.com\/blog\/cloudinary-integration-in-laravel-a-step-by-step-guide\/","title":{"rendered":"Cloudinary Integration in Laravel: A Step-by-Step Guide"},"content":{"rendered":"\n
\"Discover<\/figure>\n\n\n\n

Media management is a critical part of any modern web application. Instead of storing and serving large image and video files directly from your server, you can offload this to a powerful media service like Cloudinary<\/strong>. It not only provides storage, but also offers real-time transformations, optimization, and global delivery through CDN.<\/p>\n\n\n\n

In this tutorial, we\u2019ll walk through integrating Cloudinary with a Laravel application<\/strong> to upload and manage images seamlessly.<\/p>\n\n\n\n

1. Create a Free Cloudinary Account<\/strong><\/h2>\n\n\n\n
    \n
  1. Go to Cloudinary Signup.<\/li>\n\n\n\n
  2. Create a free account using your email, Google, or GitHub login.<\/li>\n\n\n\n
  3. After logging in, navigate to the Dashboard<\/strong> \u2192 you\u2019ll see your Cloud name, API Key, and API Secret<\/strong>. These are needed for integration.<\/li>\n<\/ol>\n\n\n\n

    2. Create an Upload Preset<\/strong><\/h2>\n\n\n\n

    Cloudinary uses upload presets<\/strong> to define upload rules (like allowed formats, storage folder, transformations).<\/p>\n\n\n\n

      \n
    1. In your Cloudinary Dashboard, go to Settings \u2192 Upload \u2192 Upload Presets<\/strong>.<\/li>\n\n\n\n
    2. Click Add Upload Preset<\/strong>.<\/li>\n\n\n\n
    3. Give it a name (e.g., laravel_preset) and configure options as needed.<\/li>\n\n\n\n
    4. Save it.<\/li>\n<\/ol>\n\n\n\n

      3. Create a Fresh Laravel Project<\/strong><\/h2>\n\n\n\n

      If you don\u2019t already have a Laravel project, create one:<\/p>\n\n\n\n

      composer create-project laravel\/laravel cloudinary_demo<\/code><\/pre>\n\n\n\n
      4. Install the Cloudinary SDK<\/strong><\/h2>\n\n\n\n
      Install the Cloudinary Laravel SDK:<\/p>\n\n\n\n
      composer require cloudinary-labs\/cloudinary-laravel<\/code><\/pre>\n\n\n\n
      Then publish the configuration file:<\/p>\n\n\n\n
      php artisan vendor:publish --tag=cloudinary<\/code><\/pre>\n\n\n\n
      <\/a> 5. Configure .env<\/strong><\/h2>\n\n\n\n
      In your Laravel project root, open the .env file and add the Cloudinary credentials.<\/p>\n\n\n\n
      #Cloudinary Configuration\n\nCLOUDINARY_URL=cloudinary:\/\/<API_KEY>:<API_SECRET> @<CLOUD_NAME>\n\nCLOUDINARY_UPLOAD_PRESET=laravel_preset<\/code><\/pre>\n\n\n\n
      6. Create Model and Migration<\/strong><\/h2>\n\n\n\n
      We\u2019ll store uploaded photo details in a database. Run:<\/p>\n\n\n\n
      php artisan make:model Photo -m<\/code><\/pre>\n\n\n\n
      Update the migration file (database\/migrations\/xxxx_create_photos_table.php):<\/p>\n\n\n\n
      Schema::create('photos', function (Blueprint $table) {\n\n$table->id();\n\n$table->string('title')->nullable();\n\n$table->string('image_url');\n\n$table->string('image_public_id');\n\n$table->timestamps();\n\n});<\/code><\/pre>\n\n\n\n
      Run the migration:<\/p>\n\n\n\n
      php artisan migrate<\/code><\/pre>\n\n\n\n
      7. Create a Controller<\/strong><\/h2>\n\n\n\n
      Generate a controller:<\/p>\n\n\n\n
      php artisan make:controller PhotoController<\/code><\/pre>\n\n\n\n
      Update app\/Http\/Controllers\/PhotoController.php:<\/p>\n\n\n\n
      <?php\n\nnamespace App\\Http\\Controllers;\n\nuse Illuminate\\Http\\Request;\n\nuse App\\Models\\Photo;\n\nuse CloudinaryLabs\\CloudinaryLaravel\\Facades\\Cloudinary;\n\nclass PhotoController extends Controller\n\n{\n\npublic function index()\n\n{\n\n$photos = Photo::latest()->get();\n\nreturn view('photos.index', compact('photos'));\n\n}\n\npublic function create()\n\n{\n\nreturn view('photos.create');\n\n}\n\npublic function store(Request $request)\n\n{\n\n$request->validate([\n\n'title' => 'nullable|string|max:255',\n\n'image' => 'required|image|max:2048',\n\n]);\n\n$file = $request->file('image');\n\n\/\/ Upload to Cloudinary\n\n$uploadResult = Cloudinary::upload($file->getRealPath(), [\n\n'folder' => 'laravel_uploads',\n\n'upload_preset' => env('CLOUDINARY_UPLOAD_PRESET'),\n\n]);\n\nPhoto::create([\n\n'title' => $request->title,\n\n'image_url' => $uploadResult->getSecurePath(),\n\n'image_public_id' => $uploadResult->getPublicId(),\n\n]);\n\nreturn redirect()->route('photos.index')->with('success', 'Photo uploaded successfully!');\n\n}\n\npublic function destroy(Photo $photo)\n\n{\n\nCloudinary::destroy($photo->image_public_id);\n\n$photo->delete();\n\nreturn redirect()->route('photos.index')->with('success', 'Photo deleted successfully!');\n\n}\n\n}<\/code><\/pre>\n\n\n\n
      8. Define Routes<\/strong><\/h2>\n\n\n\n
      In routes\/web.php:<\/p>\n\n\n\n
      use App\\Http\\Controllers\\PhotoController;\n\nRoute::get('\/photos', [PhotoController::class, 'index'])->name('photos.index');\n\nRoute::get('\/photos\/create', [PhotoController::class, 'create'])->name('photos.create');\n\nRoute::post('\/photos', [PhotoController::class, 'store'])->name('photos.store');\n\nRoute::delete('\/photos\/{photo}', [PhotoController::class, 'destroy'])->name('photos.destroy');<\/code><\/pre>\n\n\n\n
      9. Create Blade Views<\/strong><\/h2>\n\n\n\n
      Resources\/views\/layouts\/app.blade.php<\/strong><\/h3>\n\n\n\n
      <!DOCTYPE html>\n\n<html>\n\n<head>\n\n<title>Laravel Cloudinary Demo<\/title>\n\n<link rel=\"stylesheet\" href=\"https:\/\/cdn.jsdelivr.net\/npm\/bootstrap@5.3.2\/dist\/css\/bootstrap.min.css\">\n\n<\/head>\n\n<body>\n\n<div class=\"container mt-4\">\n\n@yield('content')\n\n<\/div>\n\n<\/body>\n\n<\/html><\/code><\/pre>\n\n\n\n
      resources\/views\/photos\/index.blade.php<\/strong><\/h3>\n\n\n\n
      @extends('layouts.app')\n\n@section('content')\n\n<div class=\"container\">\n\n<h2>Uploaded Photos<\/h2>\n\n<a href=\"{{ route('photos.create') }}\" class=\"btn btn-primary mb-3\">Upload New Photo<\/a>\n\n<div class=\"row\">\n\n@forelse($photos as $photo)\n\n<div class=\"col-md-4 mb-3\">\n\n<div class=\"card\">\n\n<img src=\"{{ $photo->image_url }}\" class=\"card-img-top\" alt=\"Photo\">\n\n<div class=\"card-body\">\n\n<h5>{{ $photo->title ?? 'Untitled' }}<\/h5>\n\n<form action=\"{{ route('photos.destroy', $photo) }}\" method=\"POST\">\n\n@csrf\n\n@method('DELETE')\n\n<button class=\"btn btn-danger w-100\">Delete<\/button>\n\n<\/form>\n\n<\/div>\n\n<\/div>\n\n<\/div>\n\n@empty\n\n<p>No photos uploaded yet.<\/p>\n\n@endforelse\n\n<\/div>\n\n<\/div>\n\n@endsection<\/code><\/pre>\n\n\n\n
      Resources\/views\/photos\/create.blade.php<\/strong><\/h3>\n\n\n\n
      @extends('layouts.app')\n\n@section('content')\n\n<div class=\"container\">\n\n<h1>Upload Photo<\/h1>\n\n<form method=\"POST\" action=\"{{ route('photos.store') }}\" enctype=\"multipart\/form-data\">\n\n@csrf\n\n<div class=\"mb-3\">\n\n<label for=\"title\">Title<\/label>\n\n<input type=\"text\" name=\"title\" class=\"form-control\">\n\n<\/div>\n\n<div class=\"mb-3\">\n\n<label for=\"image\">Choose Image<\/label>\n\n<input type=\"file\" name=\"image\" class=\"form-control\" required>\n\n<\/div>\n\n<button type=\"submit\" class=\"btn btn-primary\">Upload<\/button>\n\n<\/form>\n\n<\/div>\n\n@endsection<\/code><\/pre>\n\n\n\n
      10. Test the Application<\/strong><\/h2>\n\n\n\n