🌩️ Effortless Image Uploads with Cloudinary (No Backend Needed!) – Next.js & React

If you’re building a modern web app and need to upload images or GIFs without setting up a backend, you’re in the right place. Let’s integrate Cloudinary unsigned uploads into your Next.js or React (CRA) project in just minutes!

⚙️ Cloudinary Setup (1-Time Step)

1. Go to 👉 https://cloudinary.com/console

2. Create an account or log in.

3. Navigate to Settings → Upload.

4. Scroll to Upload Presets.

5. Create a new preset:

   • Name: your_app_name

   • Unsigned: ✅ Yes

   • Upload preset type: Unsigned

6. Hit Save.

7. 🔐 .env Setup

   Create a .env.local (or .env for CRA) and add:

    NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
    NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET=
   

   🧩 The Uploader Component – CloudinaryUploader.jsx

8.  import React, { useState } from 'react';
   
    const CloudinaryUploader = ({ onUpload }) => {
      const [preview, setPreview] = useState(null);
      const [loading, setLoading] = useState(false);
   
      const handleImageUpload = async (e) => {
        const file = e.target.files[0];
        if (!file) return;
   
        setPreview(URL.createObjectURL(file));
        setLoading(true);
   
        const cloudName = process.env.NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME;
        const uploadPreset = process.env.NEXT_PUBLIC_CLOUDINARY_UPLOAD_PRESET;
   
        const formData = new FormData();
        formData.append('file', file);
        formData.append('upload_preset', uploadPreset);
   
        try {
          const res = await fetch(`https://api.cloudinary.com/v1_1/${cloudName}/upload`, {
            method: 'POST',
            body: formData,
          });
   
          const data = await res.json();
   
          if (data.secure_url) {
            onUpload(data.secure_url);
          }
        } catch (err) {
          console.error('Cloudinary Upload Error:', err);
        } finally {
          setLoading(false);
        }
      };
   
      return (
        <div className="flex flex-col gap-3">
          <input
            type="file"
            accept="image/*,video/*"
            onChange={handleImageUpload}
            className="file-input file-input-bordered file-input-primary w-full max-w-xs"
          />
   
          {loading && <p className="text-blue-500">Uploading...</p>}
          {preview && !loading && (
            <img
              src={preview}
              alt="Preview"
              className="max-w-xs rounded-md shadow-md border border-gray-200"
            />
          )}
        </div>
      );
    };
   
    export default CloudinaryUploader;
   

   🚀 Usage Example – UploadDemo.jsx

9.  import React, { useState } from 'react';
    import CloudinaryUploader from './CloudinaryUploader';
   
    const UploadDemo = () => {
      const [imageUrl, setImageUrl] = useState('');
   
      return (
        <div className="p-5">
          <h1 className="text-xl font-bold mb-4">Upload your image or gif</h1>
          <CloudinaryUploader onUpload={(url) => setImageUrl(url)} />
          {imageUrl && (
            <div className="mt-4">
              <p>Uploaded Image URL:</p>
              <a href={imageUrl} target="_blank" rel="noopener noreferrer" className="text-blue-500">
                {imageUrl}
              </a>
            </div>
          )}
        </div>
      );
    };
   
    export default UploadDemo;
   

   ✅ Features Recap

   • ✅ No backend required

   • 📸 Uploads image/*, gif, and more

   • 🔐 Secure uploads via Cloudinary unsigned preset

   • 🔄 Reusable component

   • 🛠 Works with both Next.js & CRA

---

🧠 Final Thoughts

Using Cloudinary’s unsigned upload feature is a game-changer for frontend developers. It enables you to build fast, secure image upload functionality with zero backend configuration.

Have questions? Drop them in the comments! Happy coding 💻✨