Drop

Where a file goes: a real file input, plus drag and drop, paste and the phone's camera.

  • kit.drop()
  • 1.7 KB of CSS · 51 rules
  • kit.css
  • kit-data.css
  • kit-web.js for its behaviour

Use it

On your server

const kit = require('openvibe-shared/kit');

const html = kit.drop({
      name: 'photo',
      accept: 'image/*',
      label: 'Choose a photo',
      hint: 'JPEG, PNG or WebP, up to 20 MB',
      camera: true,
      id: 'kit-demo-drop'
  });

In a page that draws itself

<link rel="stylesheet" href="https://openvibe.network/shared/kit.css">
<link rel="stylesheet" href="https://openvibe.network/shared/kit-data.css">
<script src="https://openvibe.network/shared/kit.js"></script>
<script src="https://openvibe.network/shared/kit-web.js" defer></script>
<script src="https://openvibe.network/shared/kit-data-web.js" defer></script>

<script>
  const box = document.querySelector('#here');
  box.innerHTML = OpenVibeKit.drop({
        name: 'photo',
        accept: 'image/*',
        label: 'Choose a photo',
        hint: 'JPEG, PNG or WebP, up to 20 MB',
        camera: true,
        id: 'kit-demo-drop'
    });
  OpenVibeKit.enhance(box);
</script>
The HTML it returns · 872 B
<div class="ovk-drop" data-ovk-drop><input type="file" class="ovk-drop-input" id="kit-demo-drop" name="photo" accept="image/*"><label for="kit-demo-drop" class="ovk-drop-zone"><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M12 20.8V9.2M6.8 14.5l5.2-5.2l5.2 5.2M4.7 4h14.7"/></svg><strong>Choose a photo</strong><small>JPEG, PNG or WebP, up to 20 MB</small><span class="ovk-drop-name" aria-live="polite"></span></label><label class="ovk-btn ovk-btn--quiet ovk-btn--small ovk-drop-cam" hidden><svg class="ovk-i" viewBox="0 0 24 24" aria-hidden="true" focusable="false"><rect x="3.5" y="5.4" width="16.7" height="13" rx="2.8"/><circle cx="9.1" cy="10" r="1.5"/><path d="M20.3 15.6l-4.7-4.7l-7.4 7.4"/></svg><span>Take a photo</span><input type="file" accept="image/*" capture="environment" class="ovk-sr" data-ovk-drop-cam></label></div>

What it weighs

Its own rules are 7.8 KB, 1.7 KB as sent: 10% of the kit's CSS. A page that draws it pays for the whole stylesheet once, and every other part comes free.