Uploadcare Elements beta

Rich UI components on top of Uploadcare, a world-class file infrastructure, that help you build responsive, mobile-first projects on the web.

Set up

To have Elements available in your page, add this snippet in the <head>:

<script src="https://uploadcare.dev/elements.js?pubkey"></script>

Replace pubkey with your own Uploadcare’s Public Key.

Than render any element in the <body> using this template:

<div class="ucare-element" data-src="https://ucarecdn.com/uuid/"></div>

Simple!

Demo

Fotorama

<div class="ucare-fotorama"
     data-src="446f764c3-317b-43cd-97ba-f3ade840ad70~6">
</div>

It’s shorter to specify a raw UUID instead of a CDN URL.

Photoswipe

<div class="ucare-photoswipe"
     data-thumbwidth="auto"
     data-thumbheight="200">
  <i data-src="209e6481-0cde-48ac-bed4-6b43bd09e64e"></i>
  <i data-src="9be4fd97-bb07-46d5-879e-cb0dd19886c3"></i>
  <i data-src="296510ed-77a0-42f3-806c-5989716fb6ea"></i>
  ...
</div>

To specify multiple files or even multiple groups use nested tags with data-src attribute.

Video

<div class="ucare-video"
     data-src="7715a020-acd1-4480-9e49-c41f840f4923"
     data-width="848"
     data-height="464">
</div>

Audio

1. Luster
<div class="ucare-audio"
     data-src="91ab2d9c-6722-412b-aaa3-20fb10ba16c0"
     data-playlist="luster-ep">
</div>

2. Spiral
<div class="ucare-audio"
     data-src="17fd5995-5fc6-412c-8ae7-a705375cf440"
     data-playlist="luster-ep">
</div>

1. Luster

2. Spiral