title: File not being sent via socket.io
body: <p>I am using angularjs, nodejs and socketio for communication.</p>
  
  <p>client html:</p>
  
  <pre><code>&lt;div style='height: 0px;width: 0px; overflow:hidden;'&gt;
      &lt;input id="avatarInput" type="file" value="upload" onchange="angular.element(this).scope().upload(this)" /&gt;
  &lt;/div&gt;
  &lt;button data-ng-click="avatarButton()"&gt;Upload image&lt;/button&gt;
  </code></pre>
  
  <p>client js:</p>
  
  <pre><code>$scope.avatarButton = function () {
      document.getElementById('avatarInput').click();
  }
  $scope.upload = function (file) {
      console.log('client: ' + file.type);
      socket.emit('image', {
          file: file
      });  
  }
  </code></pre>
  
  <p>The above results in the output: <code>client: file</code> when I select a <code>.png</code> file to open.</p>
  
  <p>server nodejs:</p>
  
  <pre><code>.on('image', function (data) {
      console.log('server: ' + data.file.type);
  })
  </code></pre>
  
  <p>The above results in the output: <code>server: undefined</code>.</p>
  
  <p>I'm guessing the file isn't being sent to the server correct via socket.io. i can't see the error here. More documentation here: <a href="http://socket.io/blog/introducing-socket-io-1-0/#binary" rel="nofollow">http://socket.io/blog/introducing-socket-io-1-0/#binary</a></p>
  
  <p>Quoted from the documentation: </p>
  
  <blockquote>
    <p>Socket.IO now supports emitting Buffer (from Node.JS), Blob,
    ArrayBuffer and even File, as part of any datastructure:</p>
  </blockquote>
  
  <p><strong>Working code:</strong></p>
  
  <p>client html:</p>
  
  <pre><code>&lt;div style='height: 0px;width: 0px; overflow:hidden;'&gt;
      &lt;input id="avatarInput" type="file" value="upload" onchange="angular.element(this).scope().upload(this.files)" /&gt;
  &lt;/div&gt;
  &lt;button data-ng-click="avatarButton()"&gt;Upload image&lt;/button&gt;
  </code></pre>
  
  <p>client js:</p>
  
  <pre><code>    $scope.avatarButton = function () {
          document.getElementById('avatarInput').click();
      }
      $scope.upload = function (files) {
          if (window.File &amp;&amp; window.FileReader &amp;&amp; window.FileList &amp;&amp; window.Blob) {
              socket.emit('uploadAvatar', {
                  file: files[0]
              });
          } else {
              alert('The File APIs are not fully supported in this browser.');
          }
      }
  </code></pre>
  
  <p>server nodejs:</p>
  
  <pre><code>    .on('uploadAvatar', co.wrap(function* (data) {
          console.log(data.file); // spits out buffer
          var fs = require('fs');
          fs.writeFile(__dirname + '/public/avatar/myFile.png', data.file, {
              flag: "w"
          }, function (err) {
              if (err)
                  return console.log(err);
              console.log("The file was saved!");
          });
      }))
  </code></pre>