Author: John Au-Yeung

To preview images before upload with JavaScript, we use the FileReader constructor.

For instance, we write

<input type="file" />

to add the file input.

Then we write

const readURL = (file) => {
  return new Promise((res, rej) => {
    const reader = new FileReader();
    reader.onload = (e) => res(e.target.result);
    reader.onerror = (e) => rej(e);
    reader.readAsDataURL(file);
  });
};

const preview = async (event) => {
  const [file] = event.target.files;
  const url = await readURL(file);
  const img = document.querySelector("img");
  img.src = url;
};

const fileInput = document.querySelector("input");
fileInput.addEventListener("change", preview);

to call querySelector to get the file input.

And then we call addEventListener to listen for the change event with the preview listener function.

In preview we get the select file with event.target.files

Then we call the readURL function to read the file as a base64 URL.

We call readAsDataURL to get the base64 result.

We call res with e.target.result to return the base64 URL string with the promise.

In preview, we call querySelector to get the img element.

And we set the img.src attribute’s value to url to show the image we get with await.

Sometimes, we want to append a CSS class to an element with JavaScript.

In this article, we’ll look at how to append a CSS class to an element with JavaScript.

How to append a CSS class to an element with JavaScript?

To append a CSS class to an element with JavaScript, we use the classList methods.

For instance, we write

element.classList.add("my-class-name");

to add the my-class-name class to the element with classList.add.

And we write

element.classList.remove("my-class-name");

to remove the my-class-name class from the element with classList.remove.

Conclusion

To append a CSS class to an element with JavaScript, we use the classList methods.

Sometimes, we want to print an iframe from JavaScript in Safari or Chrome.

In this article, we’ll look at how to print an iframe from JavaScript in Safari or Chrome.

How to print an iframe from JavaScript in Safari or Chrome?

To print an iframe from JavaScript in Safari or Chrome, we use the print method.

For instance, we write

window.print();

in our iframe content code or

const iframe = document.getElementById(id);
iframe.contentWindow.print();

in the main page’s code to print the iframe’s contents.

We get iframe by the ID with document.getElementById.

Then we call iframe.contentWindow.print to print the iframe’s contents.

Conclusion

To print an iframe from JavaScript in Safari or Chrome, we use the print method.

Sometimes, we want to replace underscores with spaces with JavaScript.

In this article, we’ll look at how to replace underscores with spaces with JavaScript.

How to replace underscores with spaces with JavaScript?

To replace underscores with spaces with JavaScript, we use the string replace method.

For instance, we write

const s = str.replace(/_/g, " ");

to call str.replace with /_/g to match all underscores in str.

And we replace them all with ' ' as specified by the 2nd argument.

Then a new string with the replacements done is returned.

Conclusion

To replace underscores with spaces with JavaScript, we use the string replace method.

Sometimes, we want to pass variable to HTML template in Nodemailer and JavaScript.

In this article, we’ll look at how to pass variable to HTML template in Nodemailer and JavaScript.

How to pass variable to HTML template in Nodemailer and JavaScript?

To pass variable to HTML template in Nodemailer and JavaScript, we put them in the context object property.

For instance, we write

const mailOptions = {
  from: "abc@example.com",
  to: "username@example.com",
  subject: "Sending email",
  template: "yourTemplate",
  context: {
    username,
    whatever,
  },
};

to put username and whatever into context.

Then in yourTemplate, we write

{{ username }}

to render the username value.

Conclusion

To pass variable to HTML template in Nodemailer and JavaScript, we put them in the context object property.