CODEWITHSUNDEEP
reactjs
Dembele
Dembele

Reputation: 25

reactjs page reload on file upload

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?

Upvotes: 0

Views: 3190

Answers (2)

Laurenz Glück
Laurenz Glück

Reputation: 1762

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...

Upvotes: 3

Dembele
Dembele

Reputation: 25

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

Upvotes: 1

Related Questions