| OLD | NEW |
| (Empty) | |
| 1 <html> |
| 2 <head> |
| 3 <meta http-equiv="Content-type" content="text/html;charset=UTF-8"> |
| 4 <style> |
| 5 #drop_zone { |
| 6 border: 2px dashed #bbb; |
| 7 -moz-border-radius: 5px; |
| 8 -webkit-border-radius: 5px; |
| 9 border-radius: 5px; |
| 10 padding: 25px; |
| 11 text-align: center; |
| 12 font: 20pt bold 'Helvetica'; |
| 13 color: #bbb; |
| 14 } |
| 15 </style> |
| 16 </head> |
| 17 <body> |
| 18 <span id="signin"> |
| 19 <span |
| 20 class="g-signin" |
| 21 data-callback="signinCallback" |
| 22 data-clientid="692008307570.apps.googleusercontent.com" |
| 23 data-cookiepolicy="single_host_origin" |
| 24 data-scope="https://www.googleapis.com/auth/drive.file"> |
| 25 </span> |
| 26 </span> |
| 27 |
| 28 <div id="drop_zone" style="display:none;">Drop files here</div> |
| 29 |
| 30 <div id="results"/> |
| 31 <script src="upload.js"></script> |
| 32 <script type="text/javascript"> |
| 33 |
| 34 var accessToken = null; |
| 35 |
| 36 /** |
| 37 * Callback for G+ Sign-in. Swaps views if login successful. |
| 38 */ |
| 39 function signinCallback(result) { |
| 40 if(result.access_token) { |
| 41 accessToken = result.access_token; |
| 42 document.getElementById('signin').style.display = 'none'; |
| 43 document.getElementById('drop_zone').style.display = null; |
| 44 } |
| 45 } |
| 46 |
| 47 /** |
| 48 * Called when files are dropped on to the drop target. For each file, |
| 49 * uploads the content to Drive & displays the results when complete. |
| 50 */ |
| 51 function handleFileSelect(evt) { |
| 52 evt.stopPropagation(); |
| 53 evt.preventDefault(); |
| 54 |
| 55 var files = evt.dataTransfer.files; // FileList object. |
| 56 |
| 57 var output = []; |
| 58 for (var i = 0, f; f = files[i]; i++) { |
| 59 var uploader = new MediaUploader({ |
| 60 file: f, |
| 61 token: accessToken, |
| 62 onComplete: function(data) { |
| 63 var element = document.createElement("pre"); |
| 64 element.appendChild(document.createTextNode(data)); |
| 65 document.getElementById('results').appendChild(element); |
| 66 } |
| 67 }); |
| 68 uploader.upload(); |
| 69 } |
| 70 } |
| 71 |
| 72 /** |
| 73 * Dragover handler to set the drop effect. |
| 74 */ |
| 75 function handleDragOver(evt) { |
| 76 evt.stopPropagation(); |
| 77 evt.preventDefault(); |
| 78 evt.dataTransfer.dropEffect = 'copy'; |
| 79 } |
| 80 |
| 81 /** |
| 82 * Wire up drag & drop listeners once page loads |
| 83 */ |
| 84 document.addEventListener('DOMContentLoaded', function () { |
| 85 var dropZone = document.getElementById('drop_zone'); |
| 86 dropZone.addEventListener('dragover', handleDragOver, false); |
| 87 dropZone.addEventListener('drop', handleFileSelect, false); |
| 88 }); |
| 89 |
| 90 </script> |
| 91 <script src="https://apis.google.com/js/client:plusone.js"></script> |
| 92 </body> |
| 93 </html> |
| OLD | NEW |