react-upload-modal

GoKwik media picker modal for React — browse the content library (search + infinite scroll), select existing assets, or upload new ones with drag & drop, validation and per-file progress. Give it a merchantId and a baseUrl; get back S3/CDN URLs.

• Library tab: GET /media/assets with search + pagination, infinite scroll grid, single/multi select
• Upload tab: images / docs / audio → multipart POST; videos → presigned S3 flow (presign → direct S3 PUT → confirm), bypassing the API gateway size limit; fresh uploads are auto-selected
• Auth is cookie-based by default (credentials: include) with gk-merchant-id / merchant-mid headers — same contract as the GoKwik admin dashboard. Token-based setups can pass config.headers and config.withCredentials: false.

Install

npm install react-upload-modal

react and react-dom (>=17) are peer dependencies.

Usage

import { useState } from 'react';
import { UploadModal } from 'react-upload-modal';
import 'react-upload-modal/styles.css';

function MyPage({ storeId }: { storeId: string }) {
  const [open, setOpen] = useState(false);

  return (
    <>
      <button onClick={() => setOpen(true)}>Upload</button>

      <UploadModal
        open={open}
        onClose={() => setOpen(false)}
        multiple
        accept={['image/*', 'video/mp4']}
        maxSizeMB={20}
        config={{
          baseUrl: process.env.REACT_APP_OS_RESOURCE_API_URL!, // os-resources API base
          merchantId: storeId,
          // optional: token-auth setups
          // headers: { authorization: `Bearer ${token}` },
          // withCredentials: false,
        }}
        onSelect={(assets) => {
          console.log(assets.map((a) => a.url)); // S3/CDN URLs
        }}
      />
    </>
  );
}

The app must be running with an authenticated GoKwik dashboard session on a domain the API gateway allows — auth rides on cookies, the package sends credentials: 'include'.

Props

| Prop | Type | Required | Description | | --- | --- | --- | --- | | open | boolean | ✅ | Controls modal visibility | | onClose | () => void | ✅ | Called on ✕, Cancel, overlay click or Escape | | config | { baseUrl; merchantId; headers?; withCredentials? } | ✅ | os-resources API base URL + GK merchant id; optional extra headers (auth token) and cookie toggle | | onSelect | (assets: MediaAsset[]) => void | ✅ | Called with the chosen assets ({ id, url, filename, fileType, mimeType }) when the user clicks Select | | accept | string[] | — | Allowed UPLOAD types: 'image/*', 'video/mp4', '.pdf'. Omit to allow all | | maxSizeMB | number | — | Per-file size limit (uploads) | | multiple | boolean | — | Allow selecting multiple assets (default false) | | title | string | — | Modal heading (default "Select media") |

Local development

npm install
npm test           # vitest
npm run build      # tsup -> dist/

cd demo
npm install
npm run dev        # vite demo — enter a base URL + merchant id to try it

License

MIT