This may be a basic question, but I haven't been able to find the solution anywhere so hopefully it will be helpful to others.
I have created a React.js application that I want to use to upload a file to the development server I am running using webpack. When I try to 'post' files to this server (using the react component superagent) I get the following error 'http://localhost:8080/upload Error 404 (Not Found)'.
If I navigate to this address in my browser window I see that the folder exists on the server. Additionally, I the file information is logged to the console so I know my application is receiving this information.
The set up of my project is as follows:
/app/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Highcharts Testing</title>
</head>
<body>
<div id="dropzone"></div>
</body>
</html>/app/main.js
var React = require('react');
var Dropzone = require('react-dropzone');
var request = require('superagent');
var ReactDOM = require('react-dom');
var PicDropzone = React.createClass({
render: function() {
return (
<Dropzone onDrop={this.dropHandler}>
< div > Drop a photo, or click to add. < /div >
</Dropzone>
);
},
dropHandler: function(acceptedFiles) {
//var photo = new FormData();
//photo.append('photo', file[0]);
console.log(acceptedFiles);
request.post('/upload')
//.send(photo)
.end(function(err, resp) {
if (err) { console.error(err); }
return resp;
});
}
});
ReactDOM.render(<PicDropzone />, document.getElementById('dropzone'));/package.json
{
"name": "dropzone",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"start": "webpack-dev-server"
},
"author": "",
"license": "ISC",
"dependencies": {
"multer": "^1.2.1",
"react": "^15.4.1",
"react-dom": "^15.4.1",
"react-dropzone": "^3.8.0",
"superagent": "^3.3.1"
},
"devDependencies": {
"babel-core": "^6.21.0",
"babel-loader": "^6.2.10",
"babel-preset-react": "^6.16.0",
"html-webpack-plugin": "^2.24.1",
"webpack": "^1.14.0",
"webpack-dev-server": "^1.16.2"
}
}/webpack.config.js
var HTMLWebpackPlugin = require('html-webpack-plugin');
var HTMLWebpackPluginConfig = new HTMLWebpackPlugin({
template: __dirname + '/app/index.html',
filename: 'index.html',
inject: 'body'
});
module.exports = {
entry:[
__dirname + '/app/main.js'
]
,
module: {
loaders: [
{
test: /\.js$/,
exclude: /node_modules/,
loader: 'babel-loader'
}
]
},
output: {
filename: 'transformed.js',
path: __dirname + '/build'
},
plugins: [HTMLWebpackPluginConfig]
};In my root folder I also have the upload folder, a folder with the translated jsx, the node modules, and the babel config. Do I need to somehow allow my application to access http://localhost:8080/upload somewhere in the config files? I am guessing I am missing something in the set-up here, but I haven't been able to figure out what that is.