React JS - onChange triggering twice
1
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?
reactjs upload onchange
asked Nov 26 '18 at 11:26
James LockJames Lock
183
|
show 1 more comment
1
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?
reactjs upload onchange
asked Nov 26 '18 at 11:26
James LockJames Lock
183
Did you bindnewProfilePicturein the constructor? like thisthis.newProfilePicture = this.newProfilePicture.bind(this)
– Jin
Nov 26 '18 at 11:45
@JinnewProfilePictureis an arrow function. There is no need to bind
– Abdul Rauf
Nov 26 '18 at 11:49
@Jin No need to bind arrow functions
– Mirakurun
Nov 26 '18 at 11:49
Kindly add link link of the component you are using. A Minimal, Complete, and Verifiable example will be better. Are you using react-images-upload?
– Abdul Rauf
Nov 26 '18 at 11:55
Hi @AbdulRauf, yes I am using npmjs.com/package/react-images-upload react-images-upload
– James Lock
Nov 26 '18 at 15:17
|
show 1 more comment
1
1
1
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?
reactjs upload onchange
asked Nov 26 '18 at 11:26
James LockJames Lock
183
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?
reactjs upload onchange
reactjs upload onchange
asked Nov 26 '18 at 11:26
James LockJames Lock
183
asked Nov 26 '18 at 11:26
James LockJames Lock
183
asked Nov 26 '18 at 11:26
James LockJames Lock
183
asked Nov 26 '18 at 11:26
James LockJames Lock
183
asked Nov 26 '18 at 11:26
James LockJames Lock
183
183
Did you bindnewProfilePicturein the constructor? like thisthis.newProfilePicture = this.newProfilePicture.bind(this)
– Jin
Nov 26 '18 at 11:45
@JinnewProfilePictureis an arrow function. There is no need to bind
– Abdul Rauf
Nov 26 '18 at 11:49
@Jin No need to bind arrow functions
– Mirakurun
Nov 26 '18 at 11:49
Kindly add link link of the component you are using. A Minimal, Complete, and Verifiable example will be better. Are you using react-images-upload?
– Abdul Rauf
Nov 26 '18 at 11:55
Hi @AbdulRauf, yes I am using npmjs.com/package/react-images-upload react-images-upload
– James Lock
Nov 26 '18 at 15:17
|
show 1 more comment
Did you bindnewProfilePicturein the constructor? like thisthis.newProfilePicture = this.newProfilePicture.bind(this)
– Jin
Nov 26 '18 at 11:45
@JinnewProfilePictureis an arrow function. There is no need to bind
– Abdul Rauf
Nov 26 '18 at 11:49
@Jin No need to bind arrow functions
– Mirakurun
Nov 26 '18 at 11:49
Kindly add link link of the component you are using. A Minimal, Complete, and Verifiable example will be better. Are you using react-images-upload?
– Abdul Rauf
Nov 26 '18 at 11:55
Hi @AbdulRauf, yes I am using npmjs.com/package/react-images-upload react-images-upload
– James Lock
Nov 26 '18 at 15:17
Did you bind
newProfilePicture in the constructor? like this this.newProfilePicture = this.newProfilePicture.bind(this)– Jin
Nov 26 '18 at 11:45
Did you bind
newProfilePicture in the constructor? like this this.newProfilePicture = this.newProfilePicture.bind(this)– Jin
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
@Jin
newProfilePicture is an arrow function. There is no need to bind– Abdul Rauf
Nov 26 '18 at 11:49
@Jin No need to bind arrow functions
– Mirakurun
Nov 26 '18 at 11:49
@Jin No need to bind arrow functions
– Mirakurun
Nov 26 '18 at 11:49
Kindly add link link of the component you are using. A Minimal, Complete, and Verifiable example will be better. Are you using react-images-upload?
– Abdul Rauf
Nov 26 '18 at 11:55
Kindly add link link of the component you are using. A Minimal, Complete, and Verifiable example will be better. Are you using react-images-upload?
– Abdul Rauf
Nov 26 '18 at 11:55
Hi @AbdulRauf, yes I am using npmjs.com/package/react-images-upload react-images-upload
– James Lock
Nov 26 '18 at 15:17
Hi @AbdulRauf, yes I am using npmjs.com/package/react-images-upload react-images-upload
– James Lock
Nov 26 '18 at 15:17
|
show 1 more comment
1 Answer
1
active
oldest
votes
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
SatyakiSatyaki
3261417
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 lineonChange={event => this.newProfilePicture(event)}in <ImageUploader/>
– Satyaki
Nov 27 '18 at 6:16
Yeah, I've got it exactly how it was in your answer
– James Lock
Nov 27 '18 at 9:52
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480107%2freact-js-onchange-triggering-twice%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
SatyakiSatyaki
3261417
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 lineonChange={event => this.newProfilePicture(event)}in <ImageUploader/>
– Satyaki
Nov 27 '18 at 6:16
Yeah, I've got it exactly how it was in your answer
– James Lock
Nov 27 '18 at 9:52
add a comment |
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
SatyakiSatyaki
3261417
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 lineonChange={event => this.newProfilePicture(event)}in <ImageUploader/>
– Satyaki
Nov 27 '18 at 6:16
Yeah, I've got it exactly how it was in your answer
– James Lock
Nov 27 '18 at 9:52
add a comment |
0
0
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
SatyakiSatyaki
3261417
<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
SatyakiSatyaki
3261417
answered Nov 26 '18 at 11:50
SatyakiSatyaki
3261417
answered Nov 26 '18 at 11:50
SatyakiSatyaki
3261417
answered Nov 26 '18 at 11:50
SatyakiSatyaki
3261417
3261417
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 lineonChange={event => this.newProfilePicture(event)}in <ImageUploader/>
– Satyaki
Nov 27 '18 at 6:16
Yeah, I've got it exactly how it was in your answer
– James Lock
Nov 27 '18 at 9:52
add a comment |
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 lineonChange={event => this.newProfilePicture(event)}in <ImageUploader/>
– Satyaki
Nov 27 '18 at 6:16
Yeah, I've got it exactly how it was in your answer
– James Lock
Nov 27 '18 at 9:52
When I try this fix, I get the error event.preventDefault() is not a function.
– James Lock
Nov 26 '18 at 15:17
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 <ImageUploader/>– Satyaki
Nov 27 '18 at 6:16
did you add this line
onChange={event => this.newProfilePicture(event)}in <ImageUploader/>– Satyaki
Nov 27 '18 at 6:16
Yeah, I've got it exactly how it was in your answer
– James Lock
Nov 27 '18 at 9:52
Yeah, I've got it exactly how it was in your answer
– James Lock
Nov 27 '18 at 9:52
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53480107%2freact-js-onchange-triggering-twice%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Did you bind
newProfilePicturein the constructor? like thisthis.newProfilePicture = this.newProfilePicture.bind(this)– Jin
Nov 26 '18 at 11:45
@Jin
newProfilePictureis an arrow function. There is no need to bind– Abdul Rauf
Nov 26 '18 at 11:49
@Jin No need to bind arrow functions
– Mirakurun
Nov 26 '18 at 11:49
Kindly add link link of the component you are using. A Minimal, Complete, and Verifiable example will be better. Are you using react-images-upload?
– Abdul Rauf
Nov 26 '18 at 11:55
Hi @AbdulRauf, yes I am using npmjs.com/package/react-images-upload react-images-upload
– James Lock
Nov 26 '18 at 15:17