Image Organization

When integrating imgapi into your application, you don't want all your users' images dumped into a single giant folder. Our utility provides built-in project-based organization so you know exactly where everything is stored in your Cloudflare R2 bucket.

The Folder Structure

Imgapi automatically structures your uploads like a file system. It uses three levels of organization:

How to set the Project ID

You can isolate assets for different apps, tenants, or projects by simply passing the project_id property.

Method 1: Via the Embed Widget (Easiest)

If you are using the iframe widget, simply append project_id=YOUR_FOLDER_NAME to the URL:

<iframe src="https://imgapi.avadhya.in/upload-card?project_id=my_cool_blog"></iframe>

If a user named "Alice" (User ID: 123) uploads an avatar using this widget, the file will be saved precisely here:

uploads/my_cool_blog/avatar/123_1700000000.png

Method 2: Via the API (Advanced)

If you are building your own UI and using our `media-client.ts`, pass the projectId in the options object:

const result = await uploadToExtUtil({
  file: imageFile,
  projectId: 'my_cool_blog',
  assetType: 'article_hero'
});

Security & Validation