Capture result of HTML5 FileReader to a variable using promises
0
I have an Angular 4 application where I am reading an image & trying to pass the base64 string to another variable - however I am having an issue due to the async nature of this - the image.src is empty and therefore the value has passed correctly to the image object?
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});
image.src = base64; // how to get base64 string into image.src var here??
}
/**
* get base64 string from supplied file object
*/
public getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
public processImage() {
}
javascript asynchronous promise base64 filereader
asked Nov 15 '18 at 12:24
ZabsZabs
5,58138127219
add a comment |
0
I have an Angular 4 application where I am reading an image & trying to pass the base64 string to another variable - however I am having an issue due to the async nature of this - the image.src is empty and therefore the value has passed correctly to the image object?
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});
image.src = base64; // how to get base64 string into image.src var here??
}
/**
* get base64 string from supplied file object
*/
public getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
public processImage() {
}
javascript asynchronous promise base64 filereader
asked Nov 15 '18 at 12:24
ZabsZabs
5,58138127219
add a comment |
0
0
0
I have an Angular 4 application where I am reading an image & trying to pass the base64 string to another variable - however I am having an issue due to the async nature of this - the image.src is empty and therefore the value has passed correctly to the image object?
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});
image.src = base64; // how to get base64 string into image.src var here??
}
/**
* get base64 string from supplied file object
*/
public getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
public processImage() {
}
javascript asynchronous promise base64 filereader
asked Nov 15 '18 at 12:24
ZabsZabs
5,58138127219
I have an Angular 4 application where I am reading an image & trying to pass the base64 string to another variable - however I am having an issue due to the async nature of this - the image.src is empty and therefore the value has passed correctly to the image object?
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) {
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
});
image.src = base64; // how to get base64 string into image.src var here??
}
/**
* get base64 string from supplied file object
*/
public getBase64(file, onLoadCallback) {
return new Promise(function(resolve, reject) {
var reader = new FileReader();
reader.onload = function() { resolve(reader.result); };
reader.onerror = reject;
reader.readAsDataURL(file);
});
}
public processImage() {
}
javascript asynchronous promise base64 filereader
javascript asynchronous promise base64 filereader
asked Nov 15 '18 at 12:24
ZabsZabs
5,58138127219
asked Nov 15 '18 at 12:24
ZabsZabs
5,58138127219
edited Nov 15 '18 at 12:52
Zabs
asked Nov 15 '18 at 12:24
ZabsZabs
5,58138127219
asked Nov 15 '18 at 12:24
ZabsZabs
5,58138127219
asked Nov 15 '18 at 12:24
ZabsZabs
5,58138127219
5,58138127219
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
3
The issue you got is base64 is variable, scoped in callback function of .then(). To get it correct just do this:
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) { // base64 variable is scoped to this function only.
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
image.src = base64;
});
}
answered Nov 15 '18 at 18:27
NAVINNAVIN
1,6613625
do I need to add anything to the processImage()? Currently I get a 'type {} not assignable to string on theimage.src = base64line in the code? Promises confuse the hell out of me :)
– Zabs
Nov 16 '18 at 10:58
Why to use callback when using promises?
– NAVIN
Nov 16 '18 at 15:44
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%2f53319467%2fcapture-result-of-html5-filereader-to-a-variable-using-promises%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
3
The issue you got is base64 is variable, scoped in callback function of .then(). To get it correct just do this:
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) { // base64 variable is scoped to this function only.
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
image.src = base64;
});
}
answered Nov 15 '18 at 18:27
NAVINNAVIN
1,6613625
do I need to add anything to the processImage()? Currently I get a 'type {} not assignable to string on theimage.src = base64line in the code? Promises confuse the hell out of me :)
– Zabs
Nov 16 '18 at 10:58
Why to use callback when using promises?
– NAVIN
Nov 16 '18 at 15:44
add a comment |
3
The issue you got is base64 is variable, scoped in callback function of .then(). To get it correct just do this:
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) { // base64 variable is scoped to this function only.
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
image.src = base64;
});
}
answered Nov 15 '18 at 18:27
NAVINNAVIN
1,6613625
do I need to add anything to the processImage()? Currently I get a 'type {} not assignable to string on theimage.src = base64line in the code? Promises confuse the hell out of me :)
– Zabs
Nov 16 '18 at 10:58
Why to use callback when using promises?
– NAVIN
Nov 16 '18 at 15:44
add a comment |
3
3
3
The issue you got is base64 is variable, scoped in callback function of .then(). To get it correct just do this:
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) { // base64 variable is scoped to this function only.
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
image.src = base64;
});
}
answered Nov 15 '18 at 18:27
NAVINNAVIN
1,6613625
The issue you got is base64 is variable, scoped in callback function of .then(). To get it correct just do this:
ngAfterViewInit(): void {
let image = new Image();
var promise = this.getBase64(fileObject, this.processImage());
promise.then(function(base64) { // base64 variable is scoped to this function only.
console.log(base64); // outputs string e.g 'data:image/jpeg;base64,........'
image.src = base64;
});
}
answered Nov 15 '18 at 18:27
NAVINNAVIN
1,6613625
answered Nov 15 '18 at 18:27
NAVINNAVIN
1,6613625
answered Nov 15 '18 at 18:27
NAVINNAVIN
1,6613625
answered Nov 15 '18 at 18:27
NAVINNAVIN
1,6613625
1,6613625
do I need to add anything to the processImage()? Currently I get a 'type {} not assignable to string on theimage.src = base64line in the code? Promises confuse the hell out of me :)
– Zabs
Nov 16 '18 at 10:58
Why to use callback when using promises?
– NAVIN
Nov 16 '18 at 15:44
add a comment |
do I need to add anything to the processImage()? Currently I get a 'type {} not assignable to string on theimage.src = base64line in the code? Promises confuse the hell out of me :)
– Zabs
Nov 16 '18 at 10:58
Why to use callback when using promises?
– NAVIN
Nov 16 '18 at 15:44
do I need to add anything to the processImage()? Currently I get a 'type {} not assignable to string on the
image.src = base64 line in the code? Promises confuse the hell out of me :)– Zabs
Nov 16 '18 at 10:58
do I need to add anything to the processImage()? Currently I get a 'type {} not assignable to string on the
image.src = base64 line in the code? Promises confuse the hell out of me :)– Zabs
Nov 16 '18 at 10:58
Why to use callback when using promises?
– NAVIN
Nov 16 '18 at 15:44
Why to use callback when using promises?
– NAVIN
Nov 16 '18 at 15:44
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%2f53319467%2fcapture-result-of-html5-filereader-to-a-variable-using-promises%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
