dragToDataUri/index.html at master · kentbrew/dragToDataUri · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<!DOCTYPE html>
<html>
<head>
  <link rel="shortcut icon" href="data:image/x-icon;base64,AAABAAEAEBAAAAEAGABoAwAAFgAAACgAAAAQAAAAIAAAAAEAGAAAAAAAAAMAAAAAAAAAAAAAAAAAAAAAAADQwbjfz8Ln2Mrp2cro2cvErpqsnI90a2Q0LywxND4sND4zLR/Ryrl6f3ovNTIpKyjfz8Pl1cnr3c/y49Xo18ekjGFGPjkyOERgcJhmeKttf65sbXNqY1s7QkAxNzYlKynr3NDt39Lv5drs28/q1sGTektdYnR8jrpuf6ZbaZZVaJVUUl5URzg7REIzOjgnLiz06+Pz7un06+Hz6N3FvKfAs5Cvut6VosZyfJlaZIBPV3RQWHthUUE7REM0OjknLSy3sKnAt622rqO9t69tYVK2r529yeafp7mPlqaHkaxocYVKWHtTWnc7Q0AzOTgoLi1SRT5RQjZFLh1ALRxALR1OOSqzuc6hqrirs856grFkcqNLW4VjdapgaYYzOjklLSpEMidSSD5MOS1KMyNLNCNLMiGfpLiLmLGBiaxlbZtJUX1ZaJxofbJneLFIT2QkLCpTYoJWVlxIPztTOypTOSdSOii5wNSjr9SKlL1ncJZNWoyOms2ZqdZwg65NVWwgKSR1iq1HWYNNU2pcWGJXV3dfT020udLCyd2stdm+xeqjsttnc5pVZY9oeJtXXV4iKCWUqMqLo8GEl71+k7Z4jLiUnK2IkY+OlZqNl6Jod6CTpMxMW4t8j7J9jrJsc3kuNDKvwt6Yrc2OoMeWqclzhqyUnLtzdnWZnp6mrLOSnsOhq9ist92RosyBlLlrdXkxNje/y+qpvteGnMORp8isvdvJzM3BwrvL0szK0dbN1+6yvd+bpsxqep09TGg/S1QvNjOpqre9zuO2xOOtuM2xudC2tLaun5G9wr7HztjY4fK3wt99i6ZNXG9RXm5RYGYsMzGYc0+ynoyzxOKfsdq4vdGUfmu8q5axvL2Zpqy4xc6quMh8jp51ipppeoM+S0lhal7Nuqve0MPl4d65wsu7t6yhpZ+Zp6Sfra+xw8mitb63ytWuxtKAk5lJVVRLV1OGkX2DpIuPsJyKm55vfXyXpaedqaiaqKiap6aXpKOVoqGQnp56iIZib29QXF1RXFmNl4QAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA" />
  <title>Drag Files Here to Create Data URIs</title>
  <style>
    body {
      text-align: center;
      font-family: helvetica neue;
    }
    #pg {
      width: 800px;
      margin: 0 auto;
    }
    #input {
      height: 100px;
      width: 100%;
      /* background image by squidfingers, at http://squidfingers.com/patterns ... I used this tool to convert it. */
      background: gray url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADgAAAAgCAIAAADIYSy/AAACwUlEQVRYhbWWsWvbQBTGX+FCG0IMUpsEksGmFOOAl4JCyZolf2GXDv0/vGgtIYIsgZgMQR4SSBzHICNsYw8dPnJ6ene6g/b0JnH67u53T0/3vg+/f/28vEioHrObh47aEYPp9Ln/YyAG1+VqcPhFDI7SzFxz/PL6ce+TGLy/Gl8cHInBYrv5/P2rGFRYgojM/fhMIuoOe/dXYyIycSvlooQSD539vSYlluoOe8VjQURmXnQATxERDmrFBSLON315BaIVl5M9LZd4sOLy6etyhcVnNw8mLpCAp/Qoxz2oI4rguO7kcdymEyI4rkBEKDEB77J5bhZZE+7ApwTun+s7R81w3FGa9fuH4pUEXZcrPIzSjIgcuFCen50iDdbcIyA4Pzt9KpdUz5MIbKoXt2cU71CjE8oduFxZLEr+1QQuHywWJaaYn5UjIkylEhs7Dtod9hzKWpGddBxp5hAmYpNSuRF5TG79hQuyLM28hYtNHZRCqajhq5mRRLFXidMnUey9m7FUEsXZ/M29L5SK3m8vBwQSqduVVcnJZo8F/2oCl1+ZxXaDxa2p5crqZ+IQAlEEV+58O3Ikj+Me7+5ab3W+kcY1lfJ60u+85Qhlen3nVepyNNt6E655GAmq27q3yNLpMxElUext6xAkUYwpDlxsajUAFaho6w4DwPcrthtHW+eDs/cpVlx+ZVoNgCJnWxcGwJES0dYdaea4+n6wtiuOq5oQTdxsnnuLDGSj+dvlvmdNjWu2dSuuasM7UgseV1H9qwXxjtSCx2X3aDjvqCOgxzXu0RDe0Yr7nx5XggbxjiKCeNwKNKB3FBsH8bge9/Rv3pFa8LhqcpsH944TyoN7XNWGd6QWPG7l8AN6R2rB41Y/U0DvqCOgx5XXUxDvaIVoQjSVVo9r+NEQ3lGuGcLjMj8azjsKxCAeV1EL3pFa8Lh/AYbh2AJduVUxAAAAAElFTkSuQmCC) 0 0;
      color: #fff;
      text-shadow: 0 0 5px #000;
      text-align:center;
      line-height: 100px;
      -moz-border-radius: 10px;
      -moz-box-shadow: inset 0 0 10px #000;
    }

    #output {
      list-style: none;
      padding: 0;
    }
    #output li {
      padding: 0;
      height: 60px;
      position: relative;
    }
    #output li img {
      position: absolute;
      max-height: 50px;
      max-width: 50px;
      -moz-box-shadow: 0 0 5px #555;
    }
    #output li pre {
      -moz-box-shadow: 0 0 5px #555;
      text-align: left;
      height: 60px;
      line-height: 60px;
      text-indent: 5px;
      margin-left: 70px;
      overflow: hidden;
    }
   </style>
</head>
<body>
  <div id="pg">
    <h1 id="input">Drag Files Here to Create Data URIs</h1>
    <ul id="output"></ul>
  </div>
  <script type="text/javascript">
    (function (w, d, a) {
      var $ = w[a.k] = {
        "a": a, "w": w, "d": d,
        "s": {},
        "f": (function () {
          return {
            process : function (e) {
              // make a list item
              var li = $.d.createElement("LI");
              // make the thumbnail image
              var img = document.createElement("IMG");
              if (e.target.result.match(/^data:image/)) {
                // an image was dropped, show it
                img.src = e.target.result;
              } else {
                // non-image file was dropped; show gray thumb
                img.src = $.a.unk;
                img.style.height = '50px';
                img.style.width = '50px';
              }
              li.appendChild(img);
              // position the image
              $.w.setTimeout(function() {
                img.style.marginTop = 40 - (img.offsetHeight / 2) + "px";
                img.style.marginLeft = 40 - (img.offsetWidth / 2) + "px";
              }, 1);
              // add the data
              var pre = $.d.createElement("PRE");
              pre.innerHTML = e.target.result;
              li.appendChild(pre);
              // add the list item to th etop of the list
              var f = $.s.output.getElementsByTagName("LI")[0];
              if (f) {
                f.parentNode.insertBefore(li, f);
              } else {
                $.s.output.appendChild(li);
              }
            },
            drop : function (e) {
              var data = e.dataTransfer;
              e.stopPropagation();
              e.preventDefault();
              for (var i = 0, n = data.files.length; i < n; i++) {
                var file = data.files[i], reader = new FileReader();
                reader.addEventListener("loadend", $.f.process, false);
                reader.readAsDataURL(file);
              }
            },
            halt : function (e) {
              // prevent dropped file from opening
              e.stopPropagation();
              e.preventDefault();
            },
            init : function () {
              // $.s is a private global containing all structural elements
              $.s.input = $.d.getElementById("input");
              if (typeof FileReader !== "function") {
                $.s.input.className = "no";
                $.s.input.innerHTML = $.a.err;
              } else {
                $.s.input.className = "yes";
                $.s.input.innerHTML = $.a.ready;
                $.s.output = $.d.getElementById("output");
                $.s.input.addEventListener("dragenter", $.f.halt, false);
                $.s.input.addEventListener("dragover", $.f.halt, false);
                $.s.input.addEventListener("drop", $.f.drop, false);
              }
            }
          };
        }())
      };
      $.w.addEventListener("load", $.f.init, false);
    }(window, document, {
      "k": "DRAGTODATAURI",
      "err": "Please try a browser with FileReader implemented.",
      "ready": "Drop files here to create data URIs.",
      "unk": "data:image/gif;base64,R0lGODdhAQABAJEAAP///93d3QAAAAAAACwAAAAAAQABAAECAkwBADs="
    }));
  </script>
</body>
</html>