0

I have a MERN stack project in which I use nodemon to run the backend server. In the client side, I have an upload button which lets users upload files into a local directory called cache located in the backend. Then I have a route in the backend that uses the path to the cache folder to find the file and upload it to MongoDB's gridFS. The issue arises when I try to upload .json files. The proxy connection is broken between client and server side. If I change my json file extension to anything else, like .txt, .bin the upload works fine. The only way I've been able to make upload work is by removing nodemon and running my server with node server.js. Does anyone know why nodemon breaks the proxy connection when uploading json files?

here is my package.json from the server side:

{
  "name": "server",
  "version": "1.0.0",
  "description": "",
  "main": "server.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node server.js",
    "dev": "nodemon server.js --ignore client"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "body-parser": "^1.20.2",
    "cors": "^2.8.5",
    "dotenv": "^16.0.3",
    "express": "^4.18.2",
    "gridfs-stream": "^1.1.1",
    "method-override": "^3.0.0",
    "mongoose": "^7.1.1",
    "multer": "^1.4.4",
    "multer-gridfs-storage": "^1.3.0"
  }
}

from the client side:

{
  "proxy": "http://localhost:5000/",
  "name": "client",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  }
}

the fetch request:

await axios.post('/api/filesRoute/fs', { filename : filename })
     .then((json) => {
          console.log('Success uploading', filename)
          raws.push(json.data.id)
     })
     .catch((e) => {
          console.log(e)
          setError(e.message)
          setSuccess(null)
          setFilepath([])
    })

and the route from the backend API that allows me to add files to gridFS

const addFile = async (req, res) => {
  const { filename }  = req.body
  const path = "cache\\" + filename

  const uploadStream = fs.createReadStream(path).
  pipe(bucket.openUploadStream(filename)) //store the file as the filename}

  res.status(200).json({id : uploadStream.id})
  }
Ruo
  • 77
  • 7

0 Answers0