Category: JavaScript

Sometimes, we want to add paste image from clipboard functionality with JavaScript.

In this article, we’ll look at how to add paste image from clipboard functionality with JavaScript.

How to add paste image from clipboard functionality with JavaScript?

To add paste image from clipboard functionality with JavaScript, we can listen to the document paste event and get the image from the paste event handler.

For instance, we write

document.onpaste = (event) => {
  const items = (event.clipboardData || event.originalEvent.clipboardData)
    .items;
  console.log(JSON.stringify(items));
  let blob = null;
  for (let i = 0; i < items.length; i++) {
    if (items[i].type.indexOf("image") === 0) {
      blob = items[i].getAsFile();
    }
  }

  if (blob !== null) {
    const reader = new FileReader();
    reader.onload = (event) =>{
      console.log(event.target.result); 
    };
    reader.readAsDataURL(blob);
  }
};

to set document.onpaste function to a function that gets the image data.

In it, we get the clipboard data with

const items = (event.clipboardData || event.originalEvent.clipboardData)
    .items;

Then we create the blob with a for loop that gets the item from the items array with type having the substring 'image' in it.

Then we use the FileReader object’s readAsDataURL to read the blob as a base64 image URL string.

And we get the image data with event.target.result in reader.onload.

Conclusion

To add paste image from clipboard functionality with JavaScript, we can listen to the document paste event and get the image from the paste event handler.

Sometimes, we want to reset Jest mock functions calls count before every test with JavaScript.

in this article, we’ll look at how to reset Jest mock functions calls count before every test with JavaScript.

How to reset Jest mock functions calls count before every test with JavaScript?

To reset Jest mock functions calls count before every test with JavaScript, we can call mockClear on the mocked function or clearAllMocks to clear all mocks.

For instance, we write

afterEach(() => {
  local.getData.mockClear();
});

to call local.getData.mockClear to clear the mocked local.getData method after each test by calling it in the afterEach callback.

We can use

afterEach(() => {
  jest.clearAllMocks();
});

to call jest.clearAllMocks to clear all mocks after each test.

Conclusion

To reset Jest mock functions calls count before every test with JavaScript, we can call mockClear on the mocked function or clearAllMocks to clear all mocks.

Sometimes, we want to fix Object.hasOwnProperty() yielding the ESLint ‘no-prototype-builtins’ error with JavaScript.

In this article, we’ll look at how to fix Object.hasOwnProperty() yielding the ESLint ‘no-prototype-builtins’ error with JavaScript.

How to fix Object.hasOwnProperty() yielding the ESLint ‘no-prototype-builtins’ error with JavaScript?

To fix Object.hasOwnProperty() yielding the ESLint ‘no-prototype-builtins’ error with JavaScript, we can use Object.prototype.hasOwnProperty.call instead of the hasOwnProperty of an object.

For instance, we write

Object.prototype.hasOwnProperty.call(obj, prop);

to call hasOwnProperty on obj with obj as the value of this.

We pass in prop as the 2nd argument to check if prop exists in obj.

Conclusion

To fix Object.hasOwnProperty() yielding the ESLint ‘no-prototype-builtins’ error with JavaScript, we can use Object.prototype.hasOwnProperty.call instead of the hasOwnProperty of an object.

Sometimes, we want to use querySelectorAll only for elements that have a specific attribute set with JavaScript.

In this article, we’ll look at how to use querySelectorAll only for elements that have a specific attribute set with JavaScript.

How to use querySelectorAll only for elements that have a specific attribute set with JavaScript?

To use querySelectorAll only for elements that have a specific attribute set with JavaScript, we call querySelectorAll with a selector that matches the attribute name and value we’re looking for.

For instance, we write

const els = document.querySelectorAll(
  'input[value][type="checkbox"]:not([value=""])'
);

to call querySelectorAll with the value attribute of checkbox inputs that has value not equal to an empty string.

This will return a node list of all checkboxes that has value attribute not set to an empty string.

Conclusion

To use querySelectorAll only for elements that have a specific attribute set with JavaScript, we call querySelectorAll with a selector that matches the attribute name and value we’re looking for.