Problem with 'this' in a nested function and undefined value
0
I have problem with getting into my file in Dropzone (ngx-dropzone-wrapper). I'm displaying in console.log my variable "file" and I'm getting undefined. How to get access into this file?
I tried lamba expression and in my tslint error has disappeared with "this.file", but still I have undefined this.file in my importCR function.
public config: DropzoneConfigInterface;
file: File;
this.config = {
//some code here and...
accept: this.acceptFiles.bind(this) //bind here is not working I guess..
};
public acceptFiles(file, done) {
const reader = new FileReader();
reader.addEventListener('loadEnd', (e: any) => {
this.file = e.target.result;
});
reader.readAsText(file);
}
public importCR() {
console.log(this.file); //returns 'undefined'
}
Now I get udefined in "importCR" function and should be some data.
javascript typescript angular6 dropzone
asked Dec 28 '18 at 23:29
AngryGirlAngryGirl
11
add a comment |
0
I have problem with getting into my file in Dropzone (ngx-dropzone-wrapper). I'm displaying in console.log my variable "file" and I'm getting undefined. How to get access into this file?
I tried lamba expression and in my tslint error has disappeared with "this.file", but still I have undefined this.file in my importCR function.
public config: DropzoneConfigInterface;
file: File;
this.config = {
//some code here and...
accept: this.acceptFiles.bind(this) //bind here is not working I guess..
};
public acceptFiles(file, done) {
const reader = new FileReader();
reader.addEventListener('loadEnd', (e: any) => {
this.file = e.target.result;
});
reader.readAsText(file);
}
public importCR() {
console.log(this.file); //returns 'undefined'
}
Now I get udefined in "importCR" function and should be some data.
javascript typescript angular6 dropzone
asked Dec 28 '18 at 23:29
AngryGirlAngryGirl
11
thisin an event is not gonna refer to the context in which the event was declared. It will either refer to window or the event target. You can create a variable pointing tothisin the acceptFiles function and reference that variable in the event handler.
– Chris Rollins
Dec 28 '18 at 23:38
Oh also, if you want to use.bindto fix it, you can use it for the event handler. Pass((e: any) => { this.file = e.target.result; }).bind(this)as the handler
– Chris Rollins
Dec 28 '18 at 23:46
@ChrisRollins There is still problem.accept: function (file, done) { { const self = this; const reader = new FileReader(); reader.addEventListener('loadEnd', (e: any) => { self.file = e.target.result; }); reader.readAsText(file); } }.bind(this)It is not working. I get undefined again.
– AngryGirl
Dec 29 '18 at 14:40
Are you sure the event is firing?
– Chris Rollins
Dec 29 '18 at 16:34
1
Right, event wasn't firing. It was typo in eventListener "loadEnd" should be "loadend". Now everything is working, thank You a lot!
– AngryGirl
Dec 29 '18 at 20:20
add a comment |
0
0
0
I have problem with getting into my file in Dropzone (ngx-dropzone-wrapper). I'm displaying in console.log my variable "file" and I'm getting undefined. How to get access into this file?
I tried lamba expression and in my tslint error has disappeared with "this.file", but still I have undefined this.file in my importCR function.
public config: DropzoneConfigInterface;
file: File;
this.config = {
//some code here and...
accept: this.acceptFiles.bind(this) //bind here is not working I guess..
};
public acceptFiles(file, done) {
const reader = new FileReader();
reader.addEventListener('loadEnd', (e: any) => {
this.file = e.target.result;
});
reader.readAsText(file);
}
public importCR() {
console.log(this.file); //returns 'undefined'
}
Now I get udefined in "importCR" function and should be some data.
javascript typescript angular6 dropzone
asked Dec 28 '18 at 23:29
AngryGirlAngryGirl
11
I have problem with getting into my file in Dropzone (ngx-dropzone-wrapper). I'm displaying in console.log my variable "file" and I'm getting undefined. How to get access into this file?
I tried lamba expression and in my tslint error has disappeared with "this.file", but still I have undefined this.file in my importCR function.
public config: DropzoneConfigInterface;
file: File;
this.config = {
//some code here and...
accept: this.acceptFiles.bind(this) //bind here is not working I guess..
};
public acceptFiles(file, done) {
const reader = new FileReader();
reader.addEventListener('loadEnd', (e: any) => {
this.file = e.target.result;
});
reader.readAsText(file);
}
public importCR() {
console.log(this.file); //returns 'undefined'
}
Now I get udefined in "importCR" function and should be some data.
javascript typescript angular6 dropzone
javascript typescript angular6 dropzone
asked Dec 28 '18 at 23:29
AngryGirlAngryGirl
11
asked Dec 28 '18 at 23:29
AngryGirlAngryGirl
11
asked Dec 28 '18 at 23:29
AngryGirlAngryGirl
11
asked Dec 28 '18 at 23:29
AngryGirlAngryGirl
11
asked Dec 28 '18 at 23:29
AngryGirlAngryGirl
11
11
thisin an event is not gonna refer to the context in which the event was declared. It will either refer to window or the event target. You can create a variable pointing tothisin the acceptFiles function and reference that variable in the event handler.
– Chris Rollins
Dec 28 '18 at 23:38
Oh also, if you want to use.bindto fix it, you can use it for the event handler. Pass((e: any) => { this.file = e.target.result; }).bind(this)as the handler
– Chris Rollins
Dec 28 '18 at 23:46
@ChrisRollins There is still problem.accept: function (file, done) { { const self = this; const reader = new FileReader(); reader.addEventListener('loadEnd', (e: any) => { self.file = e.target.result; }); reader.readAsText(file); } }.bind(this)It is not working. I get undefined again.
– AngryGirl
Dec 29 '18 at 14:40
Are you sure the event is firing?
– Chris Rollins
Dec 29 '18 at 16:34
1
Right, event wasn't firing. It was typo in eventListener "loadEnd" should be "loadend". Now everything is working, thank You a lot!
– AngryGirl
Dec 29 '18 at 20:20
add a comment |
thisin an event is not gonna refer to the context in which the event was declared. It will either refer to window or the event target. You can create a variable pointing tothisin the acceptFiles function and reference that variable in the event handler.
– Chris Rollins
Dec 28 '18 at 23:38
Oh also, if you want to use.bindto fix it, you can use it for the event handler. Pass((e: any) => { this.file = e.target.result; }).bind(this)as the handler
– Chris Rollins
Dec 28 '18 at 23:46
@ChrisRollins There is still problem.accept: function (file, done) { { const self = this; const reader = new FileReader(); reader.addEventListener('loadEnd', (e: any) => { self.file = e.target.result; }); reader.readAsText(file); } }.bind(this)It is not working. I get undefined again.
– AngryGirl
Dec 29 '18 at 14:40
Are you sure the event is firing?
– Chris Rollins
Dec 29 '18 at 16:34
1
Right, event wasn't firing. It was typo in eventListener "loadEnd" should be "loadend". Now everything is working, thank You a lot!
– AngryGirl
Dec 29 '18 at 20:20
this in an event is not gonna refer to the context in which the event was declared. It will either refer to window or the event target. You can create a variable pointing to this in the acceptFiles function and reference that variable in the event handler.– Chris Rollins
Dec 28 '18 at 23:38
this in an event is not gonna refer to the context in which the event was declared. It will either refer to window or the event target. You can create a variable pointing to this in the acceptFiles function and reference that variable in the event handler.– Chris Rollins
Dec 28 '18 at 23:38
Oh also, if you want to use
.bind to fix it, you can use it for the event handler. Pass ((e: any) => { this.file = e.target.result; }).bind(this) as the handler– Chris Rollins
Dec 28 '18 at 23:46
Oh also, if you want to use
.bind to fix it, you can use it for the event handler. Pass ((e: any) => { this.file = e.target.result; }).bind(this) as the handler– Chris Rollins
Dec 28 '18 at 23:46
@ChrisRollins There is still problem.
accept: function (file, done) { { const self = this; const reader = new FileReader(); reader.addEventListener('loadEnd', (e: any) => { self.file = e.target.result; }); reader.readAsText(file); } }.bind(this) It is not working. I get undefined again.– AngryGirl
Dec 29 '18 at 14:40
@ChrisRollins There is still problem.
accept: function (file, done) { { const self = this; const reader = new FileReader(); reader.addEventListener('loadEnd', (e: any) => { self.file = e.target.result; }); reader.readAsText(file); } }.bind(this) It is not working. I get undefined again.– AngryGirl
Dec 29 '18 at 14:40
Are you sure the event is firing?
– Chris Rollins
Dec 29 '18 at 16:34
Are you sure the event is firing?
– Chris Rollins
Dec 29 '18 at 16:34
1
1
Right, event wasn't firing. It was typo in eventListener "loadEnd" should be "loadend". Now everything is working, thank You a lot!
– AngryGirl
Dec 29 '18 at 20:20
Right, event wasn't firing. It was typo in eventListener "loadEnd" should be "loadend". Now everything is working, thank You a lot!
– AngryGirl
Dec 29 '18 at 20:20
add a comment |
0
active
oldest
votes
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%2f53965393%2fproblem-with-this-in-a-nested-function-and-undefined-value%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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%2f53965393%2fproblem-with-this-in-a-nested-function-and-undefined-value%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
thisin an event is not gonna refer to the context in which the event was declared. It will either refer to window or the event target. You can create a variable pointing tothisin the acceptFiles function and reference that variable in the event handler.– Chris Rollins
Dec 28 '18 at 23:38
Oh also, if you want to use
.bindto fix it, you can use it for the event handler. Pass((e: any) => { this.file = e.target.result; }).bind(this)as the handler– Chris Rollins
Dec 28 '18 at 23:46
@ChrisRollins There is still problem.
accept: function (file, done) { { const self = this; const reader = new FileReader(); reader.addEventListener('loadEnd', (e: any) => { self.file = e.target.result; }); reader.readAsText(file); } }.bind(this)It is not working. I get undefined again.– AngryGirl
Dec 29 '18 at 14:40
Are you sure the event is firing?
– Chris Rollins
Dec 29 '18 at 16:34
1
Right, event wasn't firing. It was typo in eventListener "loadEnd" should be "loadend". Now everything is working, thank You a lot!
– AngryGirl
Dec 29 '18 at 20:20