CODEWITHSUNDEEP
node.jsreactjsexpressfile-upload
anonymous
anonymous

Reputation: 186

How to prevent page reload after uploading file to dev server?

I have a react application running on port 3000 and my dev server running on port 5000. I have a form (yes I have the buttons set to onClick events and not submit with preventDefault) which sends information to a remote API and a file to my dev server /upload.do and then to my public/images folder. The form was handling great until I added a file upload to server axios call and now it refreshes the entire page once file uploading occurs. I have researched this and it seems that this is caused by a change in the public folder which causes a page refresh. My server.js uses express-fileupload to handle api calls to localhost/5000/upload.do. Everything is working except it refreshes my page which I cannot have happen.

My question is: how do I stop a page refresh from occurring when uploading a file to my public/images folder?

Upvotes: 3

Views: 3472

Answers (2)

Tuan Anh Tran
Tuan Anh Tran

Reputation: 7237

you probably have dev server on watch mode. so when you upload a file, the watcher detects somethign change on disk and reload.

find that option and turn it off.

alternatively, some watchers have option to ignore certain folder. you can add that images folder to ignore list.

you mentione react app so i think you may use webpack-dev-server?

to disable watch mode for certain files/folders, do like this

const path = require('path')

module.exports = {
  ...
  devServer: {
    watchOptions: {
      ignored: [
        path.resolve(__dirname, 'dist'),
        path.resolve(__dirname, 'node_modules'),
        path.resolve(__dirname, 'images') // image folder path
      ]
    }
  },
  ...
}

Upvotes: 6

Mamunur Rashid
Mamunur Rashid

Reputation: 1185

You can try e.preventDefault();, it's use to stop default page reloading. You can see this link, Handling Events!

Upvotes: 0

Related Questions