node response is missing
Tags: react, node, help
Published: 2022-02-02 14:57:35

I am trying to trouble shoot/fix my nodejs upload image api:

My service is being stuck at somewhere.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w12xejuv67brgzwlljdy.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oqewmmb2wr14yz7cgot4.png)


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1ctygist8s4ham3g662.png)


My service is too simple, just uploading the image by resizing through sharp api in a directory and return the full path of that file.

When I select some image at first time then everything works fine and image upload successfully with a response

but When I try to crop that image after clicking on the image and try to save it (at second time) then nodejs service return following response.

I don't why it is being happened, I tried to debug the service code and It didn't stop at anywhere. Flow has been passed/executed successfully, I didn't catch any exception/error in code.

What can be the issue in it because it still displaying

> Blockquote failed to load response data. no resource with given identifier found
Problem area is in the code of onSaveImage when a server side call is being served/requested. I am using the plugin for image cropping is react-easy-crop. Browser is getting refresh/reload at this line of code

 const jsonRes = await responseMain.json();
I am sharing my nodejs service code as well as reactjs code. please look into it. Thank you.


`-----------------package.json of nodejs
{
    "name": "",
    "version": "1.0.0",
    "description": "",
    "main": "index.js",
    "dependencies": {
        "body-parser": "^1.19.0",
        "cors": "^2.8.5",
        "express": "^4.17.1",
        "express-validator": "^6.12.0",
        "handlebars": "^4.7.7",
        "jsonwebtoken": "^8.5.1",
        "mysql": "^2.18.1",
        "nodemailer": "^6.6.1",
        "nodemon": "^2.0.12",
        "sharp": "^0.29.3"
    },
    "devDependencies": {},
    "scripts": {
        "start": "nodemon --inspect index.js",
        "debug": "node --nolazy --inspect-brk=9229 index.js"
    },
    "license": "ISC"
}

------ index.js---------------------------NodeJs
const express = require("express");
const app = express();
const cors = require("cors");
var fs = require("fs");
const fsp = fs.promises;
var path = require("path");
const sharp = require("sharp");

var $pathContentBuilder = path.join(__dirname, "../", "/public/roughdata/uploads/"); 
var $urlpathContentBuilder = "/roughdata/uploads/"; // URL path
app.use(express.json({ limit: "20mb" }));
app.use(cors());
app.use(
    express.urlencoded({
        extended: true,
    })
);
function processImage(image, metadata, filename, isResizeAllow) {
    return new Promise((resolve, reject) => {
        if (isResizeAllow && isResizeAllow === true) {
            // 0.8 MB
            return image
                .resize({
                    width: Math.round(metadata.width / 2),
                    height: Math.round(metadata.height / 2),
                    fit: "cover",
                })
                .toBuffer((err, buf) => {
                    if (err) {
                        console.log("Error occured ", err);
                        return reject(err);
                    } else {
                        return resolve(buf.toString("base64"));
                    }
                });
        } else {
            return image.toBuffer((err, buf) => {
                if (err) {
                    console.log("Error occured ", err);
                    return reject(err);
                } else {
                    return resolve(buf.toString("base64"));
                }
            });
        }
    });
}

app.post("/uploaddetail", async (req, res, next) => {
    const base64Data = req.body.image;
    const filename = req.body.filename;
    let imageResizeResult = "";
    try {
        var inputbuf = Buffer.from(base64Data, "base64"); // Ta-da
        const image = await sharp(inputbuf);
        let metadata = await image.metadata();
        let convertedbase64Data = "";       
        convertedbase64Data = await processImage(image, metadata, filename, false);       
        await fsp.writeFile($pathContentBuilder + filename, convertedbase64Data, "base64");
        let resultResponse = JSON.stringify({
            success: true,
            fullurl: `${$urlpathContentBuilder}${filename}`,
            url: `${filename}`,
            imagename: `${filename}`,
            serverpath: `${$urlpathContentBuilder}`,
        });
        //res.type("json");
        res.status(200).json(resultResponse);
        //res.end();
        //next();
    } catch (e) {
        console.log(e);
        const error = new HttpError(e, 404);
        return next(error);       
    }
});
`

and following is my reactjs code.

` const settings = {
                        method: "POST",
                        headers: {
                            "Content-Type": "application/json",
                        },
                        body: JSON.stringify({
                            filename: filename,
                            image: base64Image,
                        }),
                    };
                    setLoader(true);
                    let submitUrl = process.env.REACT_APP_SERVER_DOMAIN + `/uploaddetail`;
                    const responseMain = await fetch(submitUrl, settings);
                    const jsonRes = await responseMain.json();`

Anyone can share his thoughts on it ? 
thank you