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="" alt="your image" />
        </div>
        `;

        $("#test").append(html);

        reader.readAsDataURL(input.files[0]);
    }
}

$("#multi-file").change(function () {
    readURL(this);
});

Thank you all in advance.

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.

• javascript
• jquery
• html
• template-literals

2 Answers 2

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

This is how you can call a function inside a template literal..

function something() { 
    return "better than nothing"; 
}
console.log(`Something is ${something()}.`);
//=> Something is better than nothing.