title: File Upload from API Routes Next.js not working
body: <p>I'm trying to upload a file to my server which I'm successfully able to do with my code, but I get a this console output from it:</p>
  
  <blockquote>
    <p>API resolved without sending a response for /api/upload, this may result in a stalled requests.</p>
  </blockquote>
  
  <p>The file is successfully put into the folder though.</p>
  
  <p>I don't quite understand how I am not sending a response as to me I am.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Here is my form code:</p>
  
  <pre><code>const axios = require("axios").default;
  
  class VideoUploadForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        file: null,
        uploaded: false
      };
    }
  
    onChangeHandler = event =&gt; {
      this.setState({
        selectedFile: event.target.files[0],
        loaded: 0
      });
    };
  
    onClickHandler = () =&gt; {
      const data = new FormData();
      data.append("video", this.state.selectedFile);
      axios
        .post("/api/upload", data, {
          headers: {
            "Content-Type": "multipart/form-data"
          }
        })
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });
    };
  
    render() {
      return (
        &lt;div&gt;
          &lt;form
            action="#"
            method="post"
            encType="multipart/form-data"
            target="transFrame"
          &gt;
            &lt;input type="file" name="video" onChange={this.onChangeHandler} /&gt;
            &lt;button onClick={this.onClickHandler}&gt;upload&lt;/button&gt;
          &lt;/form&gt;
          &lt;iframe
            width="200"
            height="100"
            name="transFrame"
            id="transFrame"
          &gt;&lt;/iframe&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default VideoUploadForm;
  </code></pre>
  
  <p>and the API</p>
  
  <pre><code>import multer from "multer";
  
  export const config = {
    api: {
      bodyParser: false
    }
  };
  
  var storage = multer.diskStorage({
    destination: function(req, file, cb) {
      cb(null, "public");
    },
    filename: function(req, file, cb) {
      cb(null, "video.mp4");
    }
  });
  
  var upload = multer({ storage: storage });
  
  export default async (req, res) =&gt; {
    upload.single("video")(req, {}, err =&gt; {
      res.send(req.file.path);
      res.end();
      console.log(req.file); // do something with the file
    });
  };
  </code></pre>