Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<!-- Save this code locally for offline use -->
<html>
<head>
  <meta charset="utf-8">
  <title>Data URI Generator</title>
  <style>
    html, body {
      height: calc(100vh - 3em);
    }
    body {
      display: flex;
      flex-direction: column;
      font-family: sans-serif;
    }
    #hint {
      position: absolute;
      right: .5em;
      padding: .2em;
      background: #0ee;
      font-size: 10pt;
    }
    #main {
      display: none;
      flex-direction: column;
      height: 100%;
    }
    #size {
      text-align: right;
    }
    #text {
      box-sizing: border-box;
      height: 100%;
      resize: none;
    }
  </style>
</head>
<body>
  <div id="hint">Click the "Run with JS" button above to start</div>
  <h3 style="margin-top:0">Data URI Generator</h3>
  <div id="main">
    <div>
      File: <input id="file" type="file">
    </div>
    <div id="size">&nbsp;</div>
    <textarea id="text" readonly></textarea>
  </div>
  <script>
    file.oninput = (fr) => {
      fr = new FileReader;
      fr.onload = s => {
        s = fr.result.length / 1024;
        if (s > 1024) {
          size.textContent = `Size: ${parseFloat((s / 1024).toFixed(1))}MB`
        } else size.textContent = `Size: ${parseFloat(s.toFixed(1))}KB`
        text.value = fr.result
      }
      fr.readAsDataURL(file.files[0])
    };
    text.onclick = () => text.select();
    hint.style.display = "none";
    main.style.display = "flex"
  </script>
</body>
</html>
​
 
​
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers