CODEWITHSUNDEEP
mysqlnode.jsreactjsreduxfetch
MhkAsif
MhkAsif

Reputation: 608

How to fetch and insert image to Mysql using react,fetchApi and nodejs

I want to insert an image to mysql database receiving from < input type='file' / > and after fetching want to display it on < img /> using node and react

Below is my nodejs code .

    const {ISBN,publisher,category,edition,image,title,price,quantity,author,}=req.query
console.log(req.query)
    const insertIntoBooks=`INSERT into BOOKS(ISBN,publisher,category,edition,image,title,price,quantity,author) VALUES('${ISBN}','${publisher}','${category}','${edition}','${image}','${title}',${price},${quantity},'${author}')`
connection.execute(insertIntoBooks).then(resp=>res.json({data:'success'})).catch(err=>res.json({data:'error'}))
})

above u can see im receiving an image and this image is what i want to save in Mysql. Below is my react code



props.startInsertingBook(`http://localhost:3300/books/add?title=${title}&price=${price}&quantity=${quantity}&author=${authorName}&ISBN=${ISBN}&image=${image}&publisher=${publisher}&edition=${edition}&category=${category}`)

Below is my redux Action code.

return(dispatch)=>{
    return fetch(`${url}`).then(resp=>resp.json()).then(({data})=>{
        console.log(data);
        if(data==='success'){
          return  toastr.success('Success','Book added Successfuly')
        }else{
return toastr.error('Error','Error in submitting')
        }
    }).catch(err=>toastr.error('oops','error occur due to lost in coonectivity'))

}
}```

Upvotes: 1

Views: 503

Answers (1)

Haseeb Khan
Haseeb Khan

Reputation: 54

As image is in binary you can't send it directly through get method. You need to try fetch post method to achieve it.

Upvotes: 1

Related Questions