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>
<html>
<head>
<meta charset=utf-8 />
<title>dataurl for image</title>
<style>
  html, body { font-family: sans-serif; height: 100%; }
  * { margin: 0; -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }
  body { margin-top: 28px; }
  iframe { width: 100%; height: 100%; }
  pre { width: 100%; }
  #source { top: 0; width: 100%; position: fixed; display: block; padding: 5px; color: #fff; background: #ccc; text-decoration: none; text-align: center; }
  textarea { border: 0; height: 100%; padding: 10px; width: 100%; font-family: courier; font-size: 16px; }
  #start { font-size: 36px; text-align: center; margin: 100px; }
  [hidden] { display: none; }
</style>
</head>
<body>
  <a id=source hidden href="#">Source</a>
  <p id=start>Drag and drop files in this window to read it's contents, and get data-urls for images or video</p>
</body>
</html>
 
​
 
var holder = document.documentElement,
    el = document.querySelector('#start'),
    link = document.querySelector('a');
​
holder.ondragover = function () { return false; };
holder.ondragend = function () { return false; };
holder.ondrop = function (e) {
  e.preventDefault();
​
  if (el) document.body.removeChild(el);
  
  var file = e.dataTransfer.files[0],
      reader = new FileReader(),
      type = 'data';
  
    if (file.type.indexOf('image/') === 0) {
      el = new Image();
    } else if (file.type.indexOf('video/') === 0) {
      el = document.createElement('video');
    } else if (file.type.indexOf('audio/') === 0) {
      el = document.createElement('audio');
    } else if (file.type.indexOf('text/html') === 0) {
      el = document.createElement('iframe');
      type = 'text';
    } else {
      el = document.createElement('pre');
      type = 'text';
    }
​
  
  reader.onload = function (event) {
    if (file.type.indexOf('image/') === 0 || file.type.indexOf('video/') === 0) {
      el.src = event.target.result;
    } else if (file.type.indexOf('text/html') === 0) {
      console.log(el, el.contentDocument)
      el.contentDocument.documentElement.innerHTML = event.target.result;
    } else {
      el.innerHTML = event.target.result;
    }
    var href = '';
    if (type == 'text') {
      href = 'data:' + file.type + ',' + event.target.result;
    } else {
      href = event.target.result; 
    }
    link.href = href;
    link.hidden = false;
  };
  console.log(file, type);
  document.body.appendChild(el);
  
  reader[type == 'data' ? 'readAsDataURL' : 'readAsText'](file);
​
  return false;
};
​
​
​
Output

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

Dismiss x
public
Bin info
rempro
0viewers