Upload images in Laravel (video tutorial)

Overview

Learn how to upload images in a Laravel application using the community-developed Cloudinary Laravel SDK. This tutorial demonstrates how to use Laravel with Livewire to create a product form that uploads images to Cloudinary using the storeOnCloudinary method, then retrieves and displays those assets to users.

The Cloudinary Laravel SDK provides easy ways to abstract file uploads, giving you access to features like optimization, transformations, and AI analysis out of the box.

Video tutorial

Tutorial contents

This tutorial presents the following topics. Click a timestamp to jump to that part of the video.

Introduction

0:00	As a web developer, handling media and assets is a crucial part of an application's infrastructure. Cloudinary provides an easy way to store images, videos, and other files, giving you features like image optimization, AI analysis, and generative fill out of the box.

Laravel Cloudinary SDK features

0:29	The community-developed Cloudinary Laravel SDK provides ways of abstracting how you upload files through Laravel into Cloudinary. It also gives you easy ways of using Laravel's facades to upload images and retrieve those files later.

The storeOnCloudinary method

0:52	This tutorial focuses on the storeOnCloudinary method helper provided by the Laravel Cloudinary SDK. You'll use Laravel and Livewire to create a form that uploads a file to Cloudinary so you can later retrieve and display it on the page.

Setting up the product form

1:57	Create a dashboard view with a product form that allows users to add a product name, description, price, and upload an image. Currently, the form stores images to a local public folder, but you'll connect it to Cloudinary instead.

Database structure

2:47	The products table includes image_url and image_public_id columns. These fields store the Cloudinary URL and public ID, which you'll use to retrieve and display images with transformations later.

Uploading to Cloudinary

3:10	Use the storeOnCloudinary method to upload files directly to Cloudinary. Specify a folder (like "products") to organize your assets. The SDK handles the upload process, making it easy to integrate Cloudinary into your Laravel application.

Retrieving image data from the SDK

3:26	The Laravel Cloudinary SDK provides methods to retrieve the secure URL and public ID of uploaded images. Store these values in your database for later retrieval, allowing you to display optimized images to your users.

Testing the upload form

4:17	Test the form by uploading an image. Notice the loading indicator while the image uploads to Cloudinary. Using Laravel Livewire, you can show a skeleton loader while waiting for the upload to complete, providing a smooth user experience.

Keep learning

If you like this, you might also like...

Check out the Cloudinary Academy for free self-paced Cloudinary courses on a variety of developer or DAM topics, or register for formal instructor-led courses, either virtual or on-site.