JSFiddle - React, Tailwind, and code Playground

HTML

<input id="upload" type="file"/>

<svg>
  <defs>
  <pattern id="img1" patternUnits="userSpaceOnUse" width="100" height="100">
    <image xlink:href="wall.jpg" x="0" y="0" width="100" height="100" />
  </pattern>
</defs>
<circle cx=100 cy=100 r=100 fill="url(#img1)" />
</svg>

JavaScript

var upload = document.getElementById('upload');
var patternImage = document.querySelector('#img1 image');
var currentBlobData = null;

upload.addEventListener('change', function (e) {
  var file = this.files[0];
  if (currentBlobData) {
    URL.revokeObjectURL(currentBlobData);
  }
  currentBlobData = URL.createObjectURL(file);
  patternImage.setAttribute('xlink:href', currentBlobData);
});