React JS - onChange triggering twice

Question

When I upload an image using react-image-uploader the onchange triggers twice. so it attempts to upload the image to the backend twice, here is how I handle it:

//user uploads image to app
<ImageUploader
   buttonClassName={"btn add-btn bg-orange"}
   buttonText='ADD'
   onChange={this.newProfilePicture}
   imgExtension={['.jpg', '.gif', '.png', '.gif']}
   maxFileSize={5242880}
   fileSizeError="file size is too big"
   fileTypeError="this file type is not supported"
   singleImage={true}
   withPreview={true}
   label={""}
   withIcon={false}
/>



 //image is set to this.userprofilepicture
    newProfilePicture = (picture) => {
    this.setState({ userprofilepicture: picture});
    this.setNewProfilePicture();
    ShowAll();
}

//new profilepicture is uploaded to api
setNewProfilePicture = () => {
    let data = new FormData();
    console.log('profile picture: ', this.state.userprofilepicture)
    data.append('Key', 'profilePicture');
    data.append('Value', this.state.userprofilepicture)
    this.sendUpdatedPicture('uploadprofilepicture', data);
}

Is there a way to get this to only trigger once?

Did you bind `newProfilePicture` in the constructor? like this `this.newProfilePicture = this.newProfilePicture.bind(this)` — Julian, Nov 26 '18 at 11:45
@Jin `newProfilePicture ` is an arrow function. There is no need to bind — Abdul Rauf, Nov 26 '18 at 11:49
Kindly add link link of the component you are using. A [mcve] will be better. Are you using [react-images-upload](https://github.com/JakeHartnell/react-images-upload/issues/66)? — Abdul Rauf, Nov 26 '18 at 11:55
Hi @AbdulRauf, yes I am using https://www.npmjs.com/package/react-images-upload react-images-upload — James Lock, Nov 26 '18 at 15:17
Have you checked similar issue linked in my previous comment related to ` react-images-upload`?. Solution of that issue is in https://stackoverflow.com/questions/51981376/react-images-upload-how-to-update-state-array-during-onchange — Abdul Rauf, Nov 27 '18 at 04:38

score 4 · Answer 1 · answered Jul 03 '20 at 17:38

if you are using create-react-app then your Appcomponent is wrapped in StrictMode like this:

<React.StrictMode>
  <App />
</React.StrictMode>,

go to index.js and remove <React.StrictMode></React.StrictMode>

https://github.com/facebook/react/issues/12856#issuecomment-390206425

score 0 · Answer 2 · answered Nov 26 '18 at 11:50

0

<ImageUploader
   buttonClassName={"btn add-btn bg-orange"}
   buttonText='ADD'
   onChange={event => this.newProfilePicture(event)}
   imgExtension={['.jpg', '.gif', '.png', '.gif']}
   maxFileSize={5242880}
   fileSizeError="file size is too big"
   fileTypeError="this file type is not supported"
   singleImage={true}
   withPreview={true}
   label={""}
   withIcon={false}
/>

and in the function,

newProfilePicture = event => {
  event.preventDefault();
  event.stopPropagation();
  ...your code...
}

This should solve your issue, here we are stopping the event to be propagated to the next level. So that onChange executes only once.

answered Nov 26 '18 at 11:50

Satyaki

751
2
10
25

When I try this fix, I get the error event.preventDefault() is not a function. – James Lock Nov 26 '18 at 15:17
did you add this line `onChange={event => this.newProfilePicture(event)}`in – Satyaki Nov 27 '18 at 06:16
Yeah, I've got it exactly how it was in your answer – James Lock Nov 27 '18 at 09:52

React JS - onChange triggering twice

2 Answers2

Linked