Installation

The CKBox Uploader Widget is distributed as an npm package or as a package served from CDN.

Node package

To install CKBox Uploader Widget as an NPM dependency, run:

Using npm

npm install @ckbox/uploader

Using yarn

yarn add @ckbox/uploader

Using pnpm

pnpm add @ckbox/uploader

CDN Server

To start using Uploader Widget on your website, embed the following <script> tag in the HTML of the page:

<script src="https://cdn.ckbox.io/uploader/2.9.2/ckboxWidget.js"></script>

Quick implementation example:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <script src="https://cdn.ckbox.io/uploader/2.9.2/ckboxWidget.js"></script>
    </head>
    <body>
        <div id="uploader"></div>
        <script>
            CKBoxWidget.mountUploaderWidget(document.getElementById('uploader'), {
                tokenUrl: 'https://your-token-endpoint.url',
                workspaceId: 'your-workspace-id',
            });
        </script>
    </body>
</html>

JavaScript

Once you install CKBox Uploader Widget, you can instantiate it in your code as shown below.

import { mountUploaderWidget } from '@ckbox/uploader';
import '@ckbox/uploader/dist/styles/ckbox.css';

const { unmount } = mountUploaderWidget(document.querySelector('#ckbox'), {
    workspaceId: 'your-workspace-id',
    tokenUrl: 'https://your-token-endpoint.url',
});

React integration

If you would like to use CKBox Uploader Widget in a React application, you can use the CKBoxWidget React component directly. It is exported by the @ckbox/uploader package.

Shown below is the content of an example React component file:

import * as React from "react";
import { CKBoxWidget } from '@ckbox/core';
import '@ckbox/uploader/dist/styles/ckbox.css';


function App() {
    return (
        <CKBoxWidget
            workspaceId="your-workspace-id"
            tokenUrl="https://your-token-endpoint.url"
        />
    );
}

export default App;

Note

See the list of the supported configuration options that will help you configure the component.