Widget Integration

The easiest way to integrate imgapi into your application is by using the pre-built, headless drag-and-drop widget. It requires zero backend code and works out-of-the-box.

1. Embed the Iframe

Place this iframe anywhere in your main application (Next.js, SvelteKit, Vue, etc.):

<iframe 
  src="https://imgapi.avadhya.in/upload-card?project_id=my_blog_v1" 
  width="100%" 
  height="350" 
  style="border: none; border-radius: 8px;"
></iframe>

2. Configuration Parameters

You can customize the widget's behavior by passing query parameters directly in the iframe URL.

Parameter	Type	Description
project_id	String	Organizes the uploaded image into a specific folder in the R2 bucket.
demo	Boolean	Set to `true` to test the UI without actually uploading files.
rounded	Boolean	Defaults the HTML export snippet to have rounded corners.
shadow	Boolean	Defaults the HTML export snippet to have a box shadow.
responsive	Boolean	Defaults the HTML export snippet to use responsive widths.

3. Listen for Success Events

When an image is successfully uploaded, the widget fires a postMessage to your parent window.

window.addEventListener('message', (event) => {
  // Security: Always verify the origin in production!
  // if (event.origin !== "https://imgapi.avadhya.in") return;

  const data = event.data;
  
  if (data && data.type === 'EXT_UTIL_UPLOAD_SUCCESS') {
    console.log("Uploaded URL:", data.url);
    
    // Example: Insert image into a Tiptap text editor
    // editor.chain().focus().setImage({ src: data.url }).run();
  }
});