title: Unable to post file to server using superagent
body: <p>I have a react application (using webpack and running on localhost) and I am trying to send a text file to a server that I created separately, still locally
  using Node.js (also on localhost but different port). For file upload, I use a library called <a href="https://github.com/okonet/react-dropzone" rel="nofollow noreferrer">Dropzone</a>. To send the file over, I am using a library called <a href="https://github.com/visionmedia/superagent" rel="nofollow noreferrer">superagent</a>.</p>
  
  <p>The problem here is that when I send over a file, the server receives the request but not the file. Right before I send the file, I console logged the file to make sure that the object is available: </p>
  
  <p><a href="https://i.stack.imgur.com/8lZ7x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/8lZ7x.png" alt="enter image description here"></a></p>
  
  <p>I've been trying the solutions that I found online but to no avail. I even console logged the request on the server side but found no req.body/req.files. I figured that I am doing something wrong with the superagent library. Below are the codes that I've tried. Any help would be greatly appreciated.</p>
  
  <p><strong>SERVER SIDE CODES</strong></p>
  
  <p><strong><em>app.js(1st test)</em></strong></p>
  
  <pre><code>var express = require('express');
  var app = express();
  var bodyParser = require('body-parser');
  var mongoose = require('mongoose');
  var Metadata = require('./Metadata.model');
  var cors = require('cors');
  const fs = require('fs');
  var port = 3000;
  
  var myDir = ('./tmp');
  
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({
    extended: true
  }));
  app.use(cors({origin: 'http://localhost:8080'}));
  
  app.post('/upload', function(req, res) {
    try {
      fs.accessSync(myDir);
    } catch (e) {
      fs.mkdirSync(myDir);
    };
    console.log(req);
  });
  </code></pre>
  
  <p><strong><em>app.js(2nd test)</em></strong></p>
  
  <pre><code>var express = require('express');
  var app = express();
  var bodyParser = require('body-parser');
  var mongoose = require('mongoose');
  var Metadata = require('./Metadata.model');
  var cors = require('cors');
  const fs = require('fs');
  var fileupload = require('fileupload').createFileUpload('/tmp').middleware;
  var port = 3000;
  
  var myDir = ('./tmp');
  
  app.use(bodyParser.json());
  app.use(bodyParser.urlencoded({
    extended: true
  }));
  app.use(cors({origin: 'http://localhost:8080'}));
  
  app.post('/upload', fileupload, function(req, res) {
    console.log(req);
  });
  </code></pre>
  
  <p><strong>CLIENT SIDE CODES</strong></p>
  
  <p><strong><em>test_page.js(1st test)(full code)</em></strong></p>
  
  <pre><code>import React, { Component } from 'react';
  import Dropzone from 'react-dropzone';
  var request = require('superagent');
  
  const ROOT_URL = 'http://localhost:3000';
  
  class TestPage extends Component {
  
    onDrop(files){
      files.forEach((file) =&gt; {
        console.log(file);
        request.post(`${ROOT_URL}/upload`)
        .attach(file.name, file)
        .end((err, res) =&gt; {
          console.log(err);
          console.log(res);
        })
      });
    };
  
    onOpenClick(){
      this.refs.dropzone.open();
    }
  
    render(){
      return(
        &lt;div&gt;
          &lt;Dropzone ref="dropzone" onDrop={this.onDrop}&gt;
            &lt;div&gt;Drop files here&lt;/div&gt;
          &lt;/Dropzone&gt;
          &lt;button type="button" onClick={this.onOpenClick.bind(this)}&gt;
            Open Dropzone
          &lt;/button&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default TestPage;
  </code></pre>
  
  <p><strong><em>test_page.js(1st test)(changed code)</em></strong></p>
  
  <pre><code>onDrop(files){
      files.forEach((file) =&gt; {
        console.log(file);
        request.post(`${ROOT_URL}/upload`)
        .set("Content-Type", "text/plain")//also tried ("Accept", "text/plain")
        .send(file)
        .end((err, res) =&gt; {
          console.log(err);
          console.log(res);
        })
      });
    };
  </code></pre>