I am trying to follow a tutorial video to create a blog.
On the step to upload a image i am getting a error.
I believe the error is because some mistake that I did in the server configuration, but I am not able to realize it because I am learning it.
So I would like some help with it..
server.js
typconst express = require('express');
const path = require('path');
const fileupload = require('express-fileupload');
const app = express();
app.get(fileupload());
app.use(express.static(__dirname + 'public'));
app.use(express.static(__dirname + 'editor'));
app.use('/css',express.static(__dirname +'/css'));
app.use('/img',express.static(__dirname +'/img'));
app.use('/js',express.static(__dirname +'/js'));
app.use('/uploads',express.static(__dirname +'/uploads'));
app.use(fileupload());
app.get('/', (req, res) => {
res.sendfile('./home.html');
})
app.get('/editor', (req, res) => {
res.sendfile('./editor.html');
})
app.get('/uploads', (req, res) => {
let file = req.file.image;
let date = new Date();
let imagename = date.getDate() + date.getTime() + fine.name;
let path = 'public/uploads/' + imagename;
file.mv(path,(err, result) => {
if(err){
throw err;
} else {
res.json(`uploads/${imagename}`)
}
})
})
app.listen("3000", () => {
console.log('listening......');
})e here
editor.js
const blogTitleField = document.querySelector('.title');
const articleField = document.querySelector('.article');
//banner
const bannerImage = document.querySelector('#banner-upload');
const banner = document.querySelector(".banner")
let bannerPath;
const publishBtn = document.querySelector('.publish-btn');
const upLoadInput = document.querySelector("#image-upload");
bannerImage.addEventListener('change', () => {
uploadImage(bannerImage, "banner");
})
const uploadImage = (uploadFile, uploadType ) => {
const [file] = uploadFile.files;
if(file && file.type.includes("image")) {
const formdata = new FormData();
formdata.append('image',file);
fetch('/uploads', {
method: 'post',
body: formdata
}).then(res => res.json())
.then(data => {
bannerPath = '${location.origin}/${data}';
banner.style.backgroundImage = 'url("${bannerPath}")';
})
}
}
I tried to get a better understand based on these examples.
POST http://localhost:3000/ 404 (Not Found)
https://www.twilio.com/en-us/blog/handle-file-uploads-node-express
2
Answers
I did the change but the problem still in the same lines
enter image description here
You are making a POST request, but there is no router available to accommodate it. Change the router specified as GET to post.