Javascript integration

We offer a powerful and customizable javascript library which allows you to integrate Fileboy into your applications in minutes.

Setting up Fileboy

The code snippet bellow is all you need to install Fileboy and it is as simple as it looks.

1
2
3
4
5
6
<script>
  FILEBOY_PUBLIC_KEY = "YOUR-PUBLIC-KEY"
</script>
<script src="https://unpkg.com/@cd2/fileboy-browser@1.0.0"></script>

<input type="hidden" data-fileboy name="my_file" />

The script tag imports all of the code needed to run Fileboy, the only thing you need to do is replace the `YOUR-PUBLIC-KEY` with your public key.

When this script loads it will automatically look for any inputs with the `data-fileboy` attribute and place an upload file button in their place.

Customize the uploader

The uploader can be configured to fit your requirements and flow naturally with the rest of your app. You can customize the uploader by passing different configuration to the fileboy attribute.

Each configuration option is separated by a space and must take the form of key=value

Changing the way the uploader looks

You can choose from different uploader styles by adding the

uploaderStyle

option to the fileboy attribute. You have the choice of "default", "minimal" and "buttonOnly".

Before upload

default

minimal

buttonOnly

Drop file
to upload

After upload

default

minimal

buttonOnly

1
<input type="hidden" data-fileboy="uploaderStyle=minimal" />

Specifying allowed file types

You can allow only certain file types by adding the

allow

option to the fileboy attribute. This works like the "accept" attribute on a standard html input tag.

1
<input type="hidden" data-fileboy="allow=image/*" />

Playing video

Video has its own script: the

<fileboy-player>

web component. It needs no public key and no React, and it is about 20 KB gzipped. Load it once and use the element anywhere on the page.

1
2
3
4
5
6
<script
  type="module"
  src="https://cdn.jsdelivr.net/npm/@cd2/fileboy-player@1.2.0/dist/fileboy-player.js"
></script>

<fileboy-player video-id="YOUR_VIDEO_ID" loop></fileboy-player>

Its attributes, events and styling, and the iframe alternative, are on Play a video.