cloudinary-community / cloudinary-community/next-cloudinary

Feature Request: Render CldUploadWidget Component Without Popup

Open
#576 0 comments 3 reactions 1 assignee Claimed by @devpatocld View on GitHub
Dominant language
JavaScript
Stars
300
Forks
137
Avg merge
3m
Merged PRs (30d)
2

Description

## **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**
```javascript
import { CldUploadWidget } from "next-cloudinary";

const InlineUploader = () => {
return (


Upload Your Media


console.log("Upload completed:", result)}
options={{
sources: ["local", "url", "camera"], // Existing sources
multiple: true,
theme: "minimal", // Optional, to keep the UI compact
}}
/>

);
};

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.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.