index.html 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. <html>
  2. <head>
  3. <script src="/socket.io/socket.io.js"></script>
  4. </head>
  5. <body>
  6. <div id="drop_zone">Drop files here</div>
  7. <button onclick="sendFile()">SEND FILE</button>
  8. <output id="list"></output>
  9. <script>
  10. function readBlob(opt_startByte, opt_stopByte) {
  11. if (!window.selectedFile) {
  12. alert('Please select a file!');
  13. return;
  14. }
  15. var file = window.selectedFile;
  16. var start = parseInt(opt_startByte) || 0;
  17. var stop = parseInt(opt_stopByte) || file.size - 1;
  18. var reader = new FileReader();
  19. // If we use onloadend, we need to check the readyState.
  20. reader.onloadend = function(evt) {
  21. if (evt.target.readyState == FileReader.DONE) { // DONE == 2
  22. var data = evt.target.result;
  23. sendToSocket(file.name, data, start, stop);
  24. }
  25. };
  26. var blob = file.slice(start, stop + 1);
  27. reader.readAsBinaryString(blob);
  28. }
  29. function handleFileSelect(evt) {
  30. evt.stopPropagation();
  31. evt.preventDefault();
  32. var files = evt.dataTransfer.files; // FileList object.
  33. // files is a FileList of File objects. List some properties.
  34. var output = [];
  35. for (var i = 0, f; f = files[i]; i++) {
  36. output.push('<li><strong>', escape(f.name), '</strong> (', f.type || 'n/a', ') - ',
  37. f.size, ' bytes, last modified: ',
  38. f.lastModifiedDate ? f.lastModifiedDate.toLocaleDateString() : 'n/a',
  39. '</li>');
  40. window.selectedFile = f;
  41. }
  42. document.getElementById('list').innerHTML = '<ul>' + output.join('') + '</ul>';
  43. }
  44. function handleDragOver(evt) {
  45. evt.stopPropagation();
  46. evt.preventDefault();
  47. evt.dataTransfer.dropEffect = 'copy'; // Explicitly show this is a copy.
  48. }
  49. // Setup the dnd listeners.
  50. var dropZone = document.getElementById('drop_zone');
  51. dropZone.addEventListener('dragover', handleDragOver, false);
  52. dropZone.addEventListener('drop', handleFileSelect, false);
  53. </script>
  54. <script>
  55. var socket = io.connect();
  56. socket.on('connect', function () {
  57. console.log("Connected");
  58. });
  59. function sendFile(){
  60. console.log("Sending File");
  61. if(!window.selectedFile){
  62. alert("Select a file");
  63. return;
  64. }
  65. socket.emit("wannafile", { name : window.selectedFile.name, size : window.selectedFile.size });
  66. socket.on(window.selectedFile.name, function(data){
  67. if(data.position > data.total){
  68. console.log("Error:");
  69. console.log(data);
  70. alert("error");
  71. return;
  72. }
  73. if(data.position === data.total){
  74. alert("Completed!");
  75. return;
  76. }
  77. console.log("Server ask me for daata");
  78. console.log(data);
  79. var start = data.position;
  80. var end = ( data.total > start + 1000000 ) ? start + 1000000 : data.total;
  81. readBlob(start,end);
  82. });
  83. }
  84. function sendToSocket(name, data, start, end){
  85. socket.emit("upload", { name : name, data : data, startPosition : start, endPosition : end} );
  86. }
  87. // Check for the various File API support.
  88. if (window.File && window.FileReader && window.FileList && window.Blob) {
  89. // Great success! All the File APIs are supported.
  90. } else {
  91. alert('The File APIs are not fully supported in this browser.');
  92. }
  93. </script>
  94. </body>
  95. </html>