Axios: Uploading image file to localhost gives error: POST 404 (Not Found). Why?

I’ve a very simple VueJS Axios app to understand file uploading via Axios, However the file does not get saved into localhost/upload directory.

I get 2 errors:

POST http://localhost:8080/upload 404 (Not Found)

and

createError.js?f777:16 Uncaught (in promise) Error: Request failed with status code 404
    at createError (eval at <anonymous> (build.js:1359), <anonymous>:16:15)
    at settle (eval at <anonymous> (build.js:1442), <anonymous>:17:12)
    at XMLHttpRequest.handleLoad (eval at <anonymous> (build.js:1338), <anonymous>:59:7)

Here is the completed code:


<template>
  <div id="app">
    <input type="file" @change="getFile">
    <button @click="uploadFile">Upload file</button>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: "App",

  data() {
    return {
      selectedFile: null
    }
  },

  methods: {
    getFile() {
      let file = event.target.files[0]
      this.selectedFile = file
    },
    uploadFile() {
        let fd = new FormData()
        fd.append('image', this.selectedFile, this.selectedFile.name)
        axios.post('/upload', fd)
          .then(res => {
              console.log(res);
          })
    }
  }
}
</script>

Thanks.

AFAIK You need to setup a server to handle the POST requests sent to ‘/upload’

2 Likes

Here is the server side code. The problem with the server side code is I do not know how to retrieve the file data sent to server. This console.log("TRIGGERED") gets fired but could not get beyond that.

server side code (formidable.js)

var http = require('http');
var formidable = require('formidable');
var fs = require('fs');

http.createServer(function (req, res) {
  res.setHeader("Access-Control-Allow-Origin", "*")
  res.setHeader("Content-Type", 'text/html');
  console.log("TRIGGERED");
  if (req.url == '/fileupload') {
    var form = new formidable.IncomingForm();
    form.parse(req, function (err, fields, files) {
      var oldpath = files.filetoupload.path;
      var newpath = 'C:/Users/Admin/Desktop/uploadTest/' + files.filetoupload.name;
      fs.rename(oldpath, newpath, function (err) {
        if (err) throw err;
        res.write('File uploaded and moved!');
        res.end();
      });
 });
  } else {
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.write('<form action="fileupload" method="post" enctype="multipart/form-data">');
    res.write('<input type="file" name="filetoupload"><br>');
    res.write('<input type="submit">');
    res.write('</form>');
    return res.end();
  }
}).listen(9090);

Updated client side:

<template>
  <div id="app">
    <input type="file" @change="getFile">
    <button @click="uploadFile">Upload file</button>
  </div>
</template>

<script>

import axios from 'axios'

export default {
  name: "App",

  data() {
    return {
      selectedFile: null
    }
  },

  methods: {
    getFile() {

      let file = event.target.files[0]
      this.selectedFile = file
    },
    uploadFile() {
        let fd = new FormData()
        fd.append('myImg', this.selectedFile, this.selectedFile.name)
        axios.post('http://localhost:9090/formidable', fd)
          .then(res => {
              console.log(res);
          })
    }
  }
}
</script>

Thanks

Your POSTing to /formidable, but on your server your condition is for /fileupload. So I imagine that’s part of it.