import { useState } from 'react'; import { Cloudinary } from '@cloudinary/url-gen'; import { AdvancedImage, responsive, placeholder } from '@cloudinary/react'; import CloudinaryUploadWidget from './components/CloudinaryUploadWidget'; import './App.css'; const App = () => { // Configuration const cloudName = 'hzxyensd5'; const uploadPreset = 'aoh4fpwm'; // State const [publicId, setPublicId] = useState(''); // Cloudinary configuration const cld = new Cloudinary({ cloud: { cloudName, }, }); // Upload Widget Configuration const uwConfig = { cloudName, uploadPreset, // Uncomment and modify as needed: // cropping: true, // showAdvancedOptions: true, // sources: ['local', 'url'], // multiple: false, // folder: 'user_images', // tags: ['users', 'profile'], // context: { alt: 'user_uploaded' }, // clientAllowedFormats: ['images'], // maxImageFileSize: 2000000, // maxImageWidth: 2000, // theme: 'purple', }; return (

Cloudinary Upload Widget Example

Upload Widget User Guide

Upload Widget Reference

{publicId && (

)}

); }; export default App;