Kevin Powell - Community•2mo ago

Unexpected token is not valid JSON

SyntaxError: Unexpected token 'e', "ee-square.jpg" is not valid JSON Before all, I want to say I am beginner to back end. How can be fixed this syntax error? Explications are welcome, I wanna understand why I broke the add image cover input and and working with these files. I followed WebDevSimplified playlist until this video https://youtu.be/Xm5MzWvklbI Source: https://github.com/INDavid04/indavid04mybrary Website: https://indavid04mybrary.onrender.com/books/new

Web Dev Simplified

YouTube

File Upload Setup - Node.js/Express/MongoDB Course #4

In this video we will be improving the file upload process by: 1. Implementing FilePond 2. Adding a file upload preview 3. Implementing drag and drop upload 4. Storing files in the database for Heroku Code For This Video: https://github.com/WebDevSimplified/Mybrary/tree/v1.3 Previous Video: https://youtu.be/Zi2UwhpooF8 Next Video: https://you...

GitHub

GitHub - INDavid04/indavid04mybrary: The project is made following ...

The project is made following WebDevSimplified backend playlist (link in readme) - INDavid04/indavid04mybrary

19 Replies

Joao•2mo ago

The error itself means that it's trying to read something as JSON (probably somewhere where you use JSON.parse ) but it's finding something else. I would guess probably here:

function saveCover(book, coverEncoded) {
    if (coverEncoded == null) return
    const cover = JSON.parse(coverEncoded)
    if (cover != null && imageMimeTypes.includes(cover.type)) {
        book.coverImage = new Buffer.from(cover.data, 'base64')
        book.CoverImageType = cover.type
    }
}

function saveCover(book, coverEncoded) {
    if (coverEncoded == null) return
    const cover = JSON.parse(coverEncoded)
    if (cover != null && imageMimeTypes.includes(cover.type)) {
        book.coverImage = new Buffer.from(cover.data, 'base64')
        book.CoverImageType = cover.type
    }
}

Where the coverEncoded is not actual JSON but probably just the string with some filename. Btw, for future reference when you are asking for help: while WDS is a very popular channel, not everyone watches every video he uploads. Instead of pointing people to watch it to understand what is it that you're trying to do, just explain it yourself. Not only this makes it easier for other people trying to help you, but it's good for you to walk step by step to identify where the issue is. Often times, this alone will be enough to realize right then and there what the issue is without having to post anything.

INDavid04•2mo ago

that's the problem: I try to understand the problem but I can not understand it

Joao•2mo ago

One way to help with that is to look the error message online. Unexpected token in JSON almost always means that the data passed around is in the wrong format. I say passed around because this can be on a request that the user makes, or processing a response from another third party service. In this case, it looks like it's a bad request: the filename. Something else you can try is to go step by step: what is supposed to happen vs what is happening. The error message already points to something related to the filename. So, start poking that and what happens: send a larger file, a smaller file, send an empty filename, etc.... if you always get the same error you can rule those issues out, so you can use another approach: send an object instead of a string, send a number, etc.

INDavid04•2mo ago

'send a larger file' - i did that same

Joao•2mo ago

What else have you tried? I also cannot explain something without knowing what to explain. 🤷

INDavid04•2mo ago

sure, you are right

Joao•2mo ago

Everything points to an issue in how you are uploading the data. Are you sure you need to pass in a string, maybe you need an object?

INDavid04•2mo ago

however, yesterday I tried to console the coverEncoded variable, and it shows a long chars array but I can not understad the error message it says that the first letter of the file name is unexpected token, what should mean that?

Joao•2mo ago

What I think it means is that coverEncoded is a string. However, if it expects JSON, the first character should be a curly bracket {. Do you still have that console.log?

INDavid04•2mo ago

oh, now it makes sense i deleted, but I can add back if you want to check something

Joao•2mo ago

From the saveCover function, you can see that the next line is trying to read cover.type which means that it should be an object.

INDavid04•2mo ago

yes

Joao•2mo ago

Mmm I gtg right not but I'll take a look in a minute. Check that the data you're sending to the server, the cover property is an object instead of a string or something else.

INDavid04•2mo ago

take your time and sorry for confusion!

INDavid04•2mo ago

After some console.logs, I realised coverEncoded takes the name of the file not the long strig which represents the photo. So, in this line saveCover(book, req.body.cover), req.body.cover is the name not the file, right?

INDavid04•2mo ago

and if I console.log(req.body.cover) before saveCover(book, req.body.cover) will appear the long string, that's intersting that is not happening anymore, do not know why

INDavid04•2mo ago

but now it disappeared the first error with the invalid JSON

Joao•2mo ago

So, in the first screenshot you can see that coverEncoded is just a string, which is why the call to JSON.parse. If you look at the examples from this function, it's easy to get confuse and think that regular strings would work, but notice how the string needs to be surrounded by double quotes. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/JSON/parse#examples I haven't watched the video but I'm going to assume that book.cover is supposed to be an object looking something like:

const book = {
  // ... other properties
  cover: {
    image: 'ee-square.jpg'
    // ... other properties
  }
};

const book = {
  // ... other properties
  cover: {
    image: 'ee-square.jpg'
    // ... other properties
  }
};

Based on this, you should provide an object instead of a simple string. Maybe something like: const cover = JSON.parse({ image: converEncoded })? This is where I'd take a step back and re-watch the tutorial to make sure if Kyle specifies what this data is supposed to look like. It's quite common to do things in one way at first, keeping it simple, and then making it a tad more complex. This is one area where people tend to get confused. I'm guessing something around those lines is what happened here.

INDavid04•2mo ago

Thanks a lot! I really appreciate your efforts! I will let you know when I return from this break 🙂

Gaming

Programming

Unexpected token is not valid JSON