Author: John Au-Yeung

Sometimes, we want to get Base64 encode file data from input form with JavaScript.

In this article, we’ll look at how to get Base64 encode file data from input form with JavaScript.

How to get Base64 encode file data from input form with JavaScript?

To get Base64 encode file data from input form with JavaScript, we can call the FileReader object’s readAsBinaryString method.

For instance, we write

input.onchange = (event) => {
  const file = event.srcElement.files[0];
  const reader = new FileReader();

  reader.onload = () => {
    console.log(btoa(reader.result));
  };
  reader.onerror = () => {
    console.log("error");
  };

  reader.readAsBinaryString(file);
};

to set the input.onchange property to a function that runs when we change the selected file in the file input.

input is the file input.

In it, we get the first selected file with event.srcElement.files[0].

Then we create the reader FileReader object.

We then call reader.readAsBinaryString with the file to read it into a binary string/

We get the binary string in the reader.result property in the reader.onload method.

And we call btoa with the binary string to convert it to a base64 string.

Conclusion

To get Base64 encode file data from input form with JavaScript, we can call the FileReader object’s readAsBinaryString method.

Sometimes, we want to disable href if onclick is executed with JavaScript.

In this article, we’ll look at how to disable href if onclick is executed with JavaScript.

How to disable href if onclick is executed with JavaScript?

To disable href if onclick is executed with JavaScript, we call preventDefault to stop the default navigation action.

For instance, we write

document.getElementsById("ignore-click").addEventListener("click", (event) => {
  event.preventDefault();
  //...
});

to select the link with getElementById.

Then we call addEventListener on it to add a click listener.

In it, we call event.preventDefault to stop the default navigation action.

Then we can run our onclick code after that.

Conclusion

To disable href if onclick is executed with JavaScript, we call preventDefault to stop the default navigation action.

Sometimes, we want to check for alphanumeric, dash and underscore but no spaces with JavaScript.

In this article, we’ll look at how to check for alphanumeric, dash and underscore but no spaces with JavaScript.

How to check for alphanumeric, dash and underscore but no spaces with JavaScript?

To check for alphanumeric, dash and underscore but no spaces with JavaScript, we can use a regex.

For instance, we write

const regExp = /^[a-zA-Z0-9-_]+$/;
const check = "foobar";
if (check.search(regExp) === -1) {
  alert("invalid");
} else {
  alert("valid");
}

to create the regExp regex that matches alphanumeric characters, dashes, and undescores through the string we’re checking.

We call check.search with the regExp to find the first match of the pattern.

If search returns -1, then there’re no matches.

Otherwise, the index of the first match in the string is returned.

Conclusion

To check for alphanumeric, dash and underscore but no spaces with JavaScript, we can use a regex.

To set a JavaScript object values dynamically, we can use the square bracket notation.

For instance, we write

myObj[prop] = value;

to set the myObj‘s prop property to value.

prop is a string with the property name.