How can I go about calling a function inside a Template literal.
The function syntax in the attempt below shows in the HTML:
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
var html = `
<div class="row">
${reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}}
<img id="image_upload_preview" src="http://placehold.it/100x100" alt="your image" />
</div>
`;
$("#test").append(html);
reader.readAsDataURL(input.files[0]);
}
}
$("#multi-file").change(function () {
readURL(this);
});
Thank you all in advance.
If I understand your question correctly, you want to define and invoke the function inside the template literal.
Some background:
You can execute an expression in the template literal as follows:
function fun(){
return 5
}
var someLit=`some function got a value ${fun()}`
So this is the simplest and best usage of a function inside literal. Now what you are trying to do in your example is, evaluate the expression
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
inside the template literal, this binds and event for onload, but the returned value for reader.onload
is replaced in that position inside the template literal.
and you see function(){...
in the output.
If you don't want to see that function declaration in the output you can immediately invoke the function.
Example:
(reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
})();
This will return undefined in the place of the expression. Now if you want to avoid that undefined
, you can return some empty string from your function.
(reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
return '';
})();
Now, as you have used this function as an callback for event, immediately invoking the function might not help(as you will not get the e parameter there).
So you can bind the event inside another function like:
(function(){
reader.onload = function (e) {
$('#image_upload_preview').attr('src', e.target.result);
}
return '';
})();
this will declare the function, which is bind to your onload
event and would not leave a trace in your template literal.
Note:
Simply declaring the function outside the template literal and calling it inside literal wherever you want is the best option