Feature Request: Render CldUploadWidget Component Without Popup

[zahidshowrav]

Description

I would like to request a feature enhancement for the CldUploadWidget component in the next-cloudinary package. Currently, the CldUploadWidget relies on opening a popup/modal to handle file uploads, which works well in many scenarios. However, there are situations where developers might prefer to have the widget's functionality directly embedded into their custom UI without triggering a separate popup/modal.

Proposed Feature

Add support for rendering the CldUploadWidget inline as part of the DOM instead of requiring a popup. This would allow developers to integrate the upload functionality seamlessly within their custom components.

Use Case

1. Custom Modal/Layouts: Developers may have custom modals or layouts and want to include the CldUploadWidget functionality directly within those modals without rendering two separate modal layers.
2. Improved UX: By embedding the widget inline, users can experience a more cohesive UI, especially when working with upload features in complex forms or custom dashboards.
3. Enhanced Flexibility: This feature would give developers more control over the UI and enable scenarios where a popup is not ideal.

Possible Implementation

1. Add an inline or renderInline prop to the CldUploadWidget component.
2. When this prop is enabled:
   • Render the widget's content inline instead of invoking the Cloudinary modal.
   • Expose hooks or callbacks for upload operations (onUpload, onError, onComplete, etc.), similar to the existing widget API.
3. Ensure compatibility with the existing functionality to avoid breaking changes.

Examples of Expected Usage

import { CldUploadWidget } from "next-cloudinary";

const InlineUploader = () => {
    return (
        <div>
            <h2>Upload Your Media</h2>
            <CldUploadWidget
                uploadPreset="your-upload-preset"
                inline // New prop to render widget inline
                onUpload={(result) => console.log("Upload completed:", result)}
                options={{
                    sources: ["local", "url", "camera"], // Existing sources
                    multiple: true,
                    theme: "minimal", // Optional, to keep the UI compact
                }}
            />
        </div>
    );
};

export default InlineUploader;

Additional Notes

1. This feature would align with developers' growing need for customizable and embedded solutions in modern web applications.
2. Similar flexibility exists in other SDKs and would enhance the overall usability of the next-cloudinary library.