skip to Main Content

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..

Error on the browser

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


  1. Chosen as BEST ANSWER

    I did the change but the problem still in the same lines

    enter image description here


  2. You are making a POST request, but there is no router available to accommodate it. Change the router specified as GET to post.

    app.post('/uploads', (req, res) => {
      // your codes goes here
    })
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search