reactjs page reload on file upload

Question

I'm trying to send images from a form in react to backend, but if the FormData is big enough (so far im able to send images of a bit more then 1MB) it cancels axios post request and reloads page.

The backend is configured to store images in react folder (/client/public/uploads) so the problem might be that react reloads itself, but why small images pass through then?

Console has no errors. The only hint is network tab with

add (canceled) xhr bundle.js:2113 0 B 581 ms

so what should i do to pass data without cancels?

Files at upload folder are corrupted

EDIT: I've found an intresting thing: the fronend page reloads even when i upload file with postman. My guess is my browser cancel post request becouse of this. So the problem is with how to stop react from reloading page when i create image in react subfoler?

Maybe the upload_max_filesize on you backend is to small for your upload? — Laurenz Glück
– Laurenz Glück, Commented Aug 24, 2018 at 22:53
i've tested post route with postman. No problem surfaced. So i guess it has to do with frontend — Dembele
– Dembele, Commented Aug 25, 2018 at 5:08

Laurenz Glück · Accepted Answer · 2018-08-26 17:15:30Z

3

Oh dear, I think I know what your problem is...

Are you using hot reloading? Maybe webpack DevServer - or whatever you use - is listening for changed files and if something changes (in your case the image is added), it will reload the page.

If you use webpack DevServer, just add the image folder path to the watch ignore list:

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

Otherwise, you could check if this also happens in production after building your app...

answered Aug 26, 2018 at 17:15

Laurenz Glück

1,7723 gold badges18 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Dembele Over a year ago

yep, the problem is i created client with create-react-app, webpack is hidden far away in node_modules/react-scripts/config. Will I have problems if I edit it there?

Laurenz Glück Over a year ago

@Dembele You can ejecting the config files by running: npm run eject then you'll find a config folder created in your project. You will find your webpack config files init.

Laurenz Glück Over a year ago

And yes, you should not change anything inside the node modules because it would be overwritten by npm install or npm update

Dembele Over a year ago

Ah, that's not a big deal, i only need to overwrite default settings while project is in a development, thank you

Dembele · Accepted Answer · 2018-08-26 11:34:20Z

1

Well not sure if this a correct aproach but my solution is to store files in backend so react isn't reloaded and serve files with express

answered Aug 26, 2018 at 11:34

Dembele

251 silver badge7 bronze badges

Collectives™ on Stack Overflow

reactjs page reload on file upload

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related