input text change avatar

I have a chat where the user changes their avatar using a library, but it overwrites the name and changes the gif to a static image.

I thought of adding an input so that the user can change their avatar by uploading it to another page and changing it using the URL, like this:

<input type="text" class="upload-image" name="avatar" value="{{USER.avatar_url}}">

The problem here is that I don’t know how to proceed so that the URL is saved and the avatar is changed. My English is not good enough so I’ll use google translate, hopefully someone will understand and help.

<input type="file" class="upload-image" name="avatar" value="Upload Photo">

// profile image upload
$(document).on("change", ".upload-image", function() {
  var uploadFile = $(this);
  var files = !!this.files ? this.files : [];#

  if (!files.length || !window.FileReader) return; // no file selected, or no FileReader support

  if (/^image/.test(files[0].type)) { // only image file
    var reader = new FileReader(); // instance of the FileReader
    reader.readAsDataURL(files[0]); // read the local file
    reader.onloadend = function() { // set image data as background of div
      uploadFile.closest(".imgUp").find('img').remove();
      uploadFile.closest(".imgUp").find('.imagePreview').css("background-image", "url(" + this.result + ")");
    }
  }
});