Can I set texture filtering for uploaded texture?

Question

The Challenge

The goal is to display the uploaded image pixelated, with NEAREST texture filtering.

What I tried so far

Using CSS' image-rendering property.
Setting the .glb model filters to NEAREST.

What I think the problem is

I think the issue is that the images that come with the model are properly filtered, but the new uploaded one isn't.

Interesting Links I've Found

Model Viewer Materials API

Example

document.getElementById("urlA").addEventListener("change", function() {
  const file = this.files[0];
  const viewer = document.getElementById("modelA");

  if (!file) return;

  const reader = new FileReader();
  reader.addEventListener('load', async function() {
    const texture = await viewer.createTexture(reader.result);
    viewer.model.materials[0].pbrMetallicRoughness.baseColorTexture.setTexture(texture);
  });
  reader.readAsDataURL(file);
})

body {
  background-color: rgba(255, 255, 255, 0.85)
}

h1 {
  margin: 0;
  font-size: 16pt;
  font-family: Arial, Helvetica, sans-serif;
  color: #4a5a8a
}

model-viewer {
  width: 256px;
  height: 256px;
  border: 2px solid black;
  background-color: #484E61
}

input[type="file"] {
  margin: 15px auto
}

<script src="https://unpkg.com/@google/model-viewer@1.12.0/dist/model-viewer-umd.js"></script>
<h1>Upload an image to preview it in the model</h1>
<input type="file" id="urlA">
<model-viewer id="modelA" camera-controls src="https://modelviewer.dev/shared-assets/models/Astronaut.glb" shadow-intensity="0" environment-image="neutral" exposure="0.5"></model-viewer>